根据账号权限决定页面中的按钮是否显示
使用 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" />
以上操作完毕后在需要权限的页面刷新会出现两个问题: 404 和 白屏
原因: 静态路由中的 404 页面路由规则中的 path: * 会在动态路由之前匹配
解决方案: 将404路由规则移到动态路由数组之后
// 先添加规则, 再添加404到router中 filterRoutes.push({ path: '*', redirect: '/404', hidden: true }) router.addRoutes(filterRoutes)
原因: 刷新后 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() }