在线夸白 之权限页面

啥是权限页面?

大概就是不同的用户进入系统，能看到不同的页面，菜单的标题不同！！！

一般用在后台管理系统

1.首先 咱得登录成功   然后咱需要在路由前置守卫中获取到用户的信息 ( 里头有用户可以访问到的页面 )  因为用户信息是存在vuex中的  所以需要用store.dispatch调用

if (!store.getters.userId) {
        const res = await store.dispatch('user/getProfile')
        // console.log('当前用户可以访问的', res)// roles.menus
}

 2.用本地的页面和发请求得到的页面做数组筛选   筛选出来的就是用户可访问的页面

asyncRoutes 是代表本地8个页面      filterRoutes是筛选出来的可访问的页面

 const filterRoutes = asyncRoutes.filter(item => {
          return res.roles.menus.includes(item.children[0].name)
        })

3.配置动态路由  ​在vuex中新建一个模块menu.js   咱先导入静态页面    再将后面筛选出来的可访问的页面存入menu   利于后期渲染左侧导航栏

// 导入静态路由
import { constantRoutes } from '@/router'
const state = {
  menuList: [...constantRoutes]
}

const mutations = {
  setMenuList(state, payload) {
    // 将基本数组和筛选出来的数组合并
    state.menuList = [...constantRoutes, ...payload]
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

 在前置路由守卫中把筛选出来的数组存入vuex中

// 将筛选出来的页面保存到vuex中
store.commit('menu/setMenuList', filterRoutes)

4.动态路由添加

router.addRoutes(filterRoutes)

 然后还有3个bug ~ ~ ~

1.通过addRoutes( )​动态设置了路由之后刷新白屏 

解决方法: next(to)

2.退出之后再次进入,会出现路由重复

解决方法:调用resetRouter()

export function resetRouter() {

  const newRouter = createRouter()

  router.matcher = newRouter.matcher // reset router

}

3.跳转404页面

解决方法: 在router/index.js 里面的404路由配置删掉 

 放在筛选页面列表的最后面

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

最后权限这一块完整的前置路由守卫代码如下:

// 获取个人信息
      // 发获取用户请求 调用vuex里
      // if (!store.state.user.userInfo.userId)
      if (!store.getters.userId) {
        const res = await store.dispatch('user/getProfile')
        // console.log('当前用户可以访问的', res)// roles.menus
        // 动态生成当前的用户能访问的页面
        // asyncRoutes一共有8个页面,根据用户权限 从中来筛选用户能访问的页面
        // console.log(asyncRoutes)
        const filterRoutes = asyncRoutes.filter(item => {
          return res.roles.menus.includes(item.children[0].name)
        })

        // 将404加到最后一项 解决刷新跳转到404的bug
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })

        // console.log('筛选出来的', filterRoutes)
        router.addRoutes(filterRoutes)
        // 将筛选出来的页面保存到vuex中
        store.commit('menu/setMenuList', filterRoutes)

        // 解决出现的白屏
        next(to)
      } else {
        next()
      }