前端权限管理

前端权限管理(no can no bb)

动态路由

前端路由主要逻辑路由

受保护路由(asyncRoutes)/about

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

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

任何人都可以访问

路由定义，router/index.js

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

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

访问路由逻辑判断

判断是否白名单

直接通过

判断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