20230712----重返学习-权限校验

day-111-one-hundred-and-eleven-20230712-权限校验

权限校验

无权限直接移除需权限校验的视图v-if版

1. 登录时拿到用户所有的权限标识列表并保存到vuex中。
2. v-if中判断vuex中权限标识列表是否包含有当前v-if对应按钮或视图的权限标识，没有就直接移除。

无权限直接移除需权限校验的视图-自定义指令版

1. 登录时拿到用户所有的权限标识列表并保存到vuex中。
2. 在自定义指令的inserted阶段中，用用户调用该全局自定义指令时传入的权限标识比对用户所有权限标识列表，如果不存在，就移除该DOM。
3. 在需要使用权限标识的标签上，使用该全局自定义指令，并传入一个对应这个标签的权限标识。

无权限直接移除需权限校验的路由-自定义指令版

1. 登录时拿到用户所有的权限标识列表并保存到vuex中。
2. 在自定义指令的inserted阶段中，用用户调用该全局自定义指令时传入的权限标识比对用户所有权限标识列表，如果不存在，就移除该DOM。
3. 在导航栏及历史记录栏中，给路由导航相关的按钮中使用该全局自定义指令，并会话对应于该导航按钮的权限标识。

在全局路由前置守卫中判断无权限则禁止跳转-自定义指令版

1. 登录时拿到用户所有的权限标识列表并保存到vuex中。
2. 在自定义指令的inserted阶段中，用用户调用该全局自定义指令时传入的权限标识比对用户所有权限标识列表，如果不存在，就移除该DOM。
3. 在导航栏及历史记录栏中，给路由导航相关的按钮中使用该全局自定义指令，并会话对应于该导航按钮的权限标识。
4. 在全局路由前置守卫中，用从用户目标路由中拿到的权限标识比对用户所有权限标识列表，如果不存在，就跳转回原路由。

步骤流程

1. 登录后，拿到用户所有的权限标识，并存到vuex中。
2. 写自定义指令，用于让页面中无权限就不能显示到页面上的按钮直接隐藏就好了。写全局方法，用于让页面中无权限可以显示但不能操作的按钮有个判断的方式。
3. 在路由表中把权限写好，定好路由对应的组件。
4. 在路由跳转时把无权限访问的地址跳转也进行权限校验，如没权限，提示信息之后就返回。

动态路由-优化第3与第4项

1. 事先把路由写好，交给后端。
2. 后端根据用户的token，得到一张独属于用户或用户身份的路由表。这张路由表大多是残缺，只有用户有全部权限时才会得到我们交给后端的完整路由表。
3. 我们根据后端给的路由表，动态渲染出导航栏。动态添加路由信息，之后跳转时，就根据后端给的路由表对应的路由规则来。

进阶参考

1. router-onready - 官方文档