首页  思维导图  详情

前端权限管理

2020-08-21 10:19:38   2  举报





AI智能生成

前端权限管理

vue权限管理

前端开发

软件开发

作者其他创作

大纲/内容

动态路由

前端路由主要逻辑路由

受保护路由(asyncRoutes)
/about

只有管理员特定角色能访问

白名单路由(constantRoutes)
/home /login

任何人都可以访问

路由定义，router/index.js

创建用户登录页面，views/Login.vue

路由守卫:创建.src/permission.js，并在main.js中引入

Vuex: store/modules/user.js
user token roles
permission routes, addRoutes

访问路由逻辑判断

判断是否白名单

直接通过

判断token

没有

重定向到登录页

有

判断是否有路由信息

有

直接通过

没有则请求接口

1.根据token请求角色信息

2.循环递归保护路由器数组

3.从路由参数中的meta参数指定的角色和当前用户角色判断

4.循环判度胺后角色相同的路由去除动态添加到router对象中

直接通过

按钮权限

⻚⾯中某些按钮、链接有时候需要更细粒度权限控制，这时候可以封装⼀个指令v-permission，放在需
要控制的按钮上，从⽽实现按钮级别权限控制
src/directives/permission.js

自动生成导航菜单

导航菜单是根据路由信息并结合权限判断⽽动态⽣成的。它需要对应路由的多级嵌套，所以要⽤到递归
组件。
创建侧边栏组件，components/Sidebar/index.vue
创建侧边栏菜项⽬组件，layout/components/Sidebar/SidebarItem.vue
创建侧边栏菜单项组件，layout/components/Sidebar/Item.vue