后台-权限管理

什么是权限管理以及了解认识权限

Vue中的权限管理怎么做 - 颗就完了 - 博客园 (cnblogs.com)

1.拆分静态路由和动态路由

 

 2.根据用户权限添加动态路由

 

 a.获取对应的权限，权限在roles.menus里面

 b.筛选出动态路由

import { asyncRouter } from '@/router'

        const filterRoutes = asyncRouter.filter(item => {

          // return true/false

          return roles.menus.includes(item.name)

        }) // 筛选后的路由

 3.【1.2总结】

 4.动态添加路由

动态路由可以根据地址参数跳转但是一刷新就404（解决此bug：router添加动态路由之后， 需要再转发一下）用next（to.path）这个的目的是让路由拥有信息 router的已知缺陷并且还要把404页面放到所有页面之后

router.addRoutes(filterRoutes)//添加动态路由信息到路由表

 

 

5.根据菜单显示左侧菜单 

 

 a.在用户模块下（在Vuex用户模块添加路由信息state）

 b.动态路由结合静态路由

 c.筛路由之后提交mutation更新state

store.commit('user/setRoutes',filterRoutes)把筛选filterRoutes提交上去，因为有命令空间 namespaced: true所以user/setRoutes，这样只要获取用户资料，筛选路由添加Vuex里

 6.左侧菜单引用state用来渲染

    // mapGetters快捷访问

    ...mapGetters([

      'sidebar', 'routes'

    ]),

 7.退出登录重置路由

 

 

 8.功能权限-按钮权限标识

 8.1自定义指令应用功能权限