权限控制
2020-07-17 17:16:35 0 举报AI智能生成
Vue权限控制
作者其他创作
大纲/内容
路由权限
路由配置
/src/router/index.js
/src/router/index.js
通用路由，无权限，new Router时生成
constRoutes
constRoutes
权限路由，用路由中的meta的roles做匹配，new Router时不会生成
asyncRoutes
asyncRoutes
路由守卫：没登陆跳转到白名单页面或者登陆页，
已登陆则去添加当前用户可访问路由
/src/permission.js
已登陆则去添加当前用户可访问路由
/src/permission.js
请求用户信息
store.dispatch('user/getInfo')
store.dispatch('user/getInfo')
根据当前用户过滤出可访问路由
store.dispatch('permission/generateRoutes', roles)
store.dispatch('permission/generateRoutes', roles)
递归过滤AsyncRoutes路由表
filterAsyncRoutes
filterAsyncRoutes
根据路由meta.role确定是否当前用户拥有访问权限
hasPermission
hasPermission
添加可访问路由到路由器
addRoutes
addRoutes
重新激活路由守卫，根据之前用户想进入的页面跳转至相应页面或者首页
next({ ...to, replace: true })
next({ ...to, replace: true })
按钮权限
自定义指令v-permission
src/directives/permission.js
src/directives/permission.js
遍历store存储的用户角色信息和当前指令传入的角色数组做交集来控制
v-if
0 条评论
下一页
