在 vue 中添加权限控制

最新推荐文章于 2024-07-29 11:45:48 发布

瑆箫

最新推荐文章于 2024-07-29 11:45:48 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/mo3408/article/details/90718998

版权

web 同时被 2 个专栏收录

207 篇文章 8 订阅 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

vue

33 篇文章 0 订阅

订阅专栏

本文详细介绍了在 Vue 中实现权限控制的整个过程，包括何时获取并存储权限列表、如何限制路由、处理重定向问题以及解决侧边栏显示问题。通过在 `router.beforeEach` 中获取权限列表并存储于 vuex，结合路由元信息实现动态权限判断。同时，文章还讨论了如何方便团队成员部署权限点，提供指令和全局方法两种方案。

摘要由CSDN通过智能技术生成

如何获取用户权限？

后端（当前用户拥有的权限列表）-> 前端（通过后端的接口获取到，下文中我们把当前用户的权限列表叫做 permissionList）

前端如何做限制？

通过产品的需求，在项目中进行权限点的配置，然后通过 permissionList 寻找是否有配置的权限点，有就显示，没有就不显示。

当我刚开始接到这个需求的时候就是这么想的，这有什么难的，不就获取 permissionList 然后判断就可以了嘛。后来我才发现真正的需求远比我想象的复杂。

真正的问题

上面的需求有提到我们主要解决两个问题，侧边菜单栏的显示 & 页面内操作。

假设我们有这样一个路由的设置（以下只是一个例子）：

import VueRouter from 'vue-router'
/* 注意：以下配置仅为部分配置，并且省去了 component 的配置 */
export const routes = [
  {
    path: '/',
    name: 'Admin',
    label: '首页'
  },
  {
    path: '/user',
    name: 'User',
    label: '用户