权限控制需求实现

不同的权限访问不同页面

我浅聊一下自己的理解哈~理论会偏多

概念：我理解的分为两个部分。

1. 不需要token就可以访问的页面：/404、/login等等
2. 自己定义的内容页面，主页和其他功能页面之类的

之前的路由页面都是写 ‘死’ 的，现在存到 Vuex处理

一、不需要token页面的处理

步骤1:路由页面导出

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  }
  ]

步骤2:Vuex操作数据

// 本来就能访问的4个页面
import { constantRoutes } from '@/router/index'

const state = {
  menuList: [...constantRoutes]
}

二、需要token页面的处理
由于登录用户的权限不同，所以能访问的页面也不同。
我们在登录请求发出后，在路由守卫next()放行前进行操作

步骤1：先导出自定的页面组件

// 路由设置
export const asyncRoutes = [departmentRouter, approval, attendance, employee, permission, role, salary, social]

步骤2：导航守卫接收进行处理

import { asyncRoutes } from './router/index'

1. 先拿到登录时用户详细信息里的访问权限（这个很简单哈~）
2. 用你导出的自定义组件与用户权限能访问的进行筛选

        // 筛选出用户登录可以访问的页面在不在定义的八个页面内
        //并且返还一个数组
        // reset.roles.menus 用户能访问的页面
        // children[0].name 用户每一项的name名
        const filteredRouter = asyncRoutes.filter(item => {
          return reset.roles.menus.includes(item.children[0].name)
        })

然后使用动态路由的router.addRoutes方法将得到的结果（用户权限内能访问的页面）添加到路由配置

router.addRoutes(filteredRouter)

还没完！！！
最后一步哈~保存到 Vuex

1. store.commit方法

store.commit('menu/setMenus', filteredRouter)

2. Vuex里面定义方法

const mutations = {
  setMenus(state, asyncRoutes) {
    state.menuList = [...constantRoutes, ...asyncRoutes]
  }
}

...constantRoutes+...asyncRoutes数组合并，展开运算符哈~

这样就可以显示可以访问的页面啦~

最后最后还有几个Bug

1. 点击不同的模块刷新后会报404
   原因：这是由于404页面必须在数组的最末尾，不然就会出现这种情况
   解决：只需要用push方法将404添加到末尾就OK

 filteredRouter.push({ path: '*', redirect: '/404', hidden: true })

2. 刷新会白屏
   原因：上面那个404解决后会出现白屏的问题，这个是Vue由来已久的问题，想了解下面有详细信息哈~
   原因详解
   解决：再走一遍next(to)，没错！就是再走一遍next(to)