如何优雅地在vue中添加权限控制示例详解

import { includePermissionWithStore } from '@/utils/permission'
export default {
 install (Vue, options) {
 Vue.prototype.$permission = function (permissions) {
 const permissionList = this.$store.state.permissionList
 return includePermissionWithStore(permissions, permissionList)
 }
 }
}

以下为指令的实现代码（为了不与 v-if 冲突，这里控制显示隐藏通过添加/移除 className 的方式）：

// @/directive/permission
import { includePermission } from '@/utils/permission'
const permissionHandle = (el, binding) => {
 const permissions = binding.value
 if (!includePermission(permissions)) {
 el.classList.add('hide')
 } else {
 el.classList.remove('hide')
 }
}
export default {
 inserted: permissionHandle,
 update: permissionHandle
}

总结

针对之前的问题，有以下的总结：

1、什么时候获取 permissionList，如何存储 permissionList

router.beforeEach

2、子路由全都没权限时不应该显示本身（例：当用户列表和用户设置都没有权限时，用户也不应该显示在侧边栏）

通过存储路由配置到 vuex 中，生成侧边栏设置，获取权限后修改 vuex 中的配置控制显示 & 隐藏。

3、默认重定向的路由没有权限时，应寻找 children 中有权限的一项重定向（例：用户路由重定向到用户列表路由，若用户列表没有权限，则应该重定向到用户组路由）

通过 vue-router 中 redirect 设置为 Function 来实现

4、当用户直接输入没有权限的 url 时需要跳转到没有权限的页面或其他操作。（路由限制）

在 meta 中设置权限，

router.beforeEach

以上就是我对于这次权限需求的大体解决思路与代码实现，可能并不是很完美，但还是希望可以帮助到你 ^_^

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对软件开发网的支持。