vue-需求-权限管理

2022/4/10 23:18:17

编程Tag： vue 权限路由 store 页面 404 需求 filterRoutes

本文主要是介绍vue-需求-权限管理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、按钮权限

根据账号权限决定页面中的按钮是否显示
使用 vue 自定义指令来判断是否拥有按钮的权限

// (1) 全局注册组件
Vue.directive('arrowBtn', {
  // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  inserted(el, binding) {
    // (2) 从 vuex 获取角色拥有的的权限
    const pointsArr = store.state.user.userInfo.roles.points // ['POINT-USER-UPDATE']
    // (3) 根据传入的值判断是否拥有此按钮的权限
    if (!pointsArr.includes(binding.value)) {
      // (4) 如果没有该权限, 则移除该按钮
      el.remove(el)
    }
  }
})

// 使用自定义指令
<el-button
  v-arrowBtn="'POINT-USER-UPDATE'"
>编辑</el-button>

二、页面权限

获取拥有的页面权限

// 获取角色拥有的页面权限
const {
  data: {
    roles: { menus }
  }
} = await store.dispatch('user/getInfo')
// 筛选有显示权限的页面
const filterRoutes = asyncRoutes.filter((item) => {
  return menus.includes(item.children[0].name)
})
// 使用 router.addRoutes() 方法添加了动态路由数组但是没有显示到左侧菜单中
router.addRoutes(filterRoutes)

提示: 添加路由并不会触发新的导航。也就是说，除非触发新的导航，否则不会显示所添加的路由。

存储动态路由规则

// 合并静态路由和动态路由, 存储 routes 到 vuex 
store.commit('user/setRoute', [...constantRoutes, ...filterRoutes])

<!-- 传入 siderBarItem 渲染菜单 -->
<sidebar-item
  v-for="route in $store.state.user.filterRoutes"
  :key="route.path"
  :item="route"
  :base-path="route.path"
/>

bug: 404 和白屏

以上操作完毕后在需要权限的页面刷新会出现两个问题: 404 和白屏

(1) 404

原因: 静态路由中的 404 页面路由规则中的 path: * 会在动态路由之前匹配

解决方案: 将404路由规则移到动态路由数组之后

// 先添加规则, 再添加404到router中
filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
router.addRoutes(filterRoutes)

(2) 白屏

原因: 刷新后 vuex 中的数据消失, 会重新获取用户数据, 动态路由也会消失, 跳转的 next() 方法在动态路由重新添加之前已经放行, 所以需要重新指定路径

if (!store.state.user.userInfo.userId) {
  // 表示之前获取过用户信息====不需要在重新获取了
  const {
    data: {
      roles: { menus }
    }
  } = await store.dispatch('user/getInfo
  // 添加动态路由但不显示到菜单中
  // 筛选显示有权限的页面
  const filterRoutes = asyncRoutes.filter((item) => {
  return menus.includes(item.children[0].name)
  })
  filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
  router.addRoutes(filterRoutes)
  // 存储routes到vuex
  store.commit('user/setRoute', [...constantRoutes, ...filterRoutes])
  next({
    ...to, // 证路由添加完了再进入页面 (可以理解为重进一次)
    replace: true // 清除刷新的历史记录
  })
} else {
  next()
}