## 基本概念权限控制，最常见的基本上有 2 种 * 基于 `ACL` 的权限控制 * 基于 `RBAC` 的权限控制这个两种到底有什么不同呢？我们通过下图来分析一下 ![image-20240427221653200.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d236360dca3497992d0155689a178b6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1422\&h=943\&s=76762\&e=png\&b=fffefe) `ACL` 是基于用户 -> 权限，直接为每个用户分配权限 `RBAC` 基于用户 -> 角色 -> 权限，以角色为媒介，来为每个用户分配权限这样做的好处是，某个权限过于敏感时，想要将每个用户或者部分用户的权限去掉，就不需要每个用户的权限都操作一遍，只需要删除对应角色的权限即可那在实际的开发中 `RBAC` 是最常用的权限控制方案，就前端而言，`RBAC` 主要如何实现的呢？主要就两个部分 * 页面权限受控 * 按钮权限受控下面我们就来实现这两个部分 * 页面权限 * 按钮权限页面的访问，我们都是需要配置路由表的，根据配置路由表的路径来访问页面那么，我们控制了路由表，不就能控制页面的访问了吗？实现思路 * 前端根据不同用户信息，从后端获取该用户所拥有权限的路由表 * 前端动态创建路由表基本环境 ![image-20240428095213291.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2ddb4ac68b544fd92aadf66d04e3944~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=495\&h=68\&s=3976\&e=png\&b=282c34) 创建项目 npm install -g @vue/cli vue --version # @vue/cli 5.0.8 vue create vue-router-dome ![image-20240428100652805.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b3a3ae237f64f19a3845b272a1287c2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=769\&h=170\&s=21493\&e=png\&b=282c34) 打开项目，`npm run serve` 运行一下 ![image-20240428101422341.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3431b4dec4547009f9d77567da4ac1d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1891\&h=868\&s=71555\&e=png\&b=fefefe) 代码初始化，删除不必要的一些文件 ![image-20240430141733619.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc8a82ba3f6f4a6db747b185ffad1482~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=786\&h=537\&s=82722\&e=png\&b=262a31) 我们创建几个新文件夹 ![image-20240430142101446.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce809fa69f9e45d09bb73d3fbb0c242e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=798\&h=510\&s=67283\&e=png\&b=262a31) 写下基本的页面 ![image-20240430164545661.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d3f7544fc0b4cf8979f1cccb21cb395~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=755\&h=271\&s=35170\&e=png\&b=262a31) ```html ``` ```html ``` ```html ``` 写下路由配置 ![image-20240430150442282.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f7ba8cd80e74cd39433cd987f30de13~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=562\&h=83\&s=8787\&e=png\&b=282d35) ```ts // remaining.ts import Layout from '@/layout/index.vue' const remainingRouter: AppRouteRecordRaw[] = [ { path: '/remaining', component: Layout, redirect: 'home', children: [ { path: '/remaining/home', component: () => import('@/views/home.vue'), name: '首页', meta: {}, } ], name: '主页管理', meta: undefined }, ] export default remainingRouter ``` `remaining` 主要为了存放一些公共路由，没有权限页可以访问，比如登录页、404页面这些因为是用 `typescript` 编写的，我们需要加一下声明文件，定义下 `remainingRouter` 的类型 ![image-20240430150828363.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7760a68011449d3ae8d2d85e999b14d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=761\&h=329\&s=39859\&e=png\&b=262b32) ```ts // router.d.ts import type { RouteRecordRaw } from 'vue-router' import { defineComponent } from 'vue' declare module 'vue-router' { interface RouteMeta extends Record { hidden?: boolean alwaysShow?: boolean title?: string icon?: string noCache?: boolean breadcrumb?: boolean affix?: boolean activeMenu?: string noTagsView?: boolean followAuth?: string canTo?: boolean } } type Component = | ReturnType | (() => Promise) | (() => Promise) declare global { interface AppRouteRecordRaw extends Omit { name: string meta: RouteMeta component?: Component | string children?: AppRouteRecordRaw[] props?: Recordable fullPath?: string keepAlive?: boolean } interface AppCustomRouteRecordRaw extends Omit { icon: any name: string meta: RouteMeta component: string componentName?: string path: string redirect: string children?: AppCustomRouteRecordRaw[] keepAlive?: boolean visible?: boolean parentId?: number alwaysShow?: boolean } } ``` 接下来编写，创建路由、导出路由 ```ts import type { App } from 'vue' import type { RouteRecordRaw } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router' import remainingRouter from './modules/remaining' // 创建路由实例 const router = createRouter({ history: createWebHashHistory(), // createWebHashHistory URL带#，createWebHistory URL不带# strict: true, routes: remainingRouter as RouteRecordRaw[], scrollBehavior: () => ({ left: 0, top: 0 }) }) // 导出路由实例 export const setupRouter = (app: App) => { app.use(router) } export default router ``` 在 `main.ts` 中导入下 ```typescript import { createApp } from 'vue' import App from './App.vue' import { setupRouter } from './router/index' // 路由 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' // 创建实例 const setupAll = async () => { const app = createApp(App) setupRouter(app) app.mount('#app') } setupAll() ``` 接下来写下 Layout 架构我们要实现的效果，是一个后台管理页面的侧边栏，点击菜单右边就能跳转到对应路由所在页面 ![image-20240430142444903.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fec5bf4669254119ba6b94207a8dc91f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1083\&h=296\&s=6227\&e=png\&b=f0f2f5) 创建 `AppMain.vue` 右边路由跳转页 `Sidebar.vue` 侧边栏 `index.vue` 作为 layout 架构的统一出口 ![image-20240430142547758.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe71e3fea93d4874b1572887de3707b2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=585\&h=111\&s=14222\&e=png\&b=272b33) ```ts ``` 上面是一种动态路由的固定写法，需要与的路由配置进行对应其中最主要的就是 `` 中的 `key`，这是为确定路由跳转对应页面的标识，没这个就跳不了有一个小知识点 * `route.fullPath` 拿到的地址是包括 `search` 和 `hash` 在内的完整地址。该字符串是经过百分号编码的 * `route.path` 经过百分号编码的 URL 中的 `pathname` 段 ```ts //路径：http://127.0.0.1:3000/user?id=1 console.log(route.path) // 输出 /user console.log(route.fullPath) // 输出 /user?id=1 ``` 为了实现右边侧边栏，需要引入 `element plus` 来快速搭建 ```ts pnpm install element-plus ``` `main.ts` 改造一下，完整引入 `element-plus` ```ts import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' // element-plus 组件库 import 'element-plus/dist/index.css' // element-plus 组件库样式文件 // 创建实例 const setupAll = async () => { const app = createApp(App) app.use(ElementPlus) app.mount('#app') } setupAll() ``` 我们来编写下侧边栏 ```ts ``` 统一导出 layout 架构，加一点小样式 ```Typescript ``` `pnpm run serve` 运行一下 ![image-20240430151909980.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f1913b20ffa469ba185063d1a559f85~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1256\&h=193\&s=7549\&e=png\&b=f0f2f5) ## 页面权限管理通常我们实现页面权限管理，比较常见的方案是，有权限的路由信息由后端传给前端，前端再根据路由信息进行渲染我们先安装下 `pinia` 模拟下后端传过来的数据 ```ts pnpm install pinia ``` ![image-20240430160445750.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33b3451898f945f7a5fefa5b9c002c86~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=482\&h=45\&s=4256\&e=png\&b=282c34) ```ts import { defineStore } from "pinia"; interface AuthStore { // 菜单 menus: any[]; } export const useAuthStore = defineStore("authState", { state: (): AuthStore => ({ menus: [ { path: "/routing", component: null, redirect: "user", children: [ { path: "/routing/user", component: "/user.vue", name: "用户管理", meta: {}, }, { path: "/routing/menu", component: "/menu.vue", name: "菜单管理", meta: {}, } ], name: "系统管理", meta: undefined, }, ] }), getters: {}, actions: {}, }); ``` 好了，我们把模拟的路由数据，加到本地路由中 ![image-20240430163450010.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90c036b2e6de4a72a67f37e2ee925471~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=865\&h=362\&s=53173\&e=png\&b=262a31) ```ts // permission.ts import router from './router' import type { RouteRecordRaw } from 'vue-router' import { formatRoutes } from './utils/router' import { useAuthStore } from '@/store'; import { App } from 'vue'; // 路由加载前 router.beforeEach(async (to, from, next) => { const { menus } = useAuthStore() routerList.forEach((route) => { router.addRoute(menus as unknown as RouteRecordRaw) // 动态添加可访问路由表 }) next() }) // 路由跳转之后调用 router.afterEach((to) => { }) ``` ![image-20240430163840687.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e43c57c1a46647db995ee577a26cb5be~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1176\&h=315\&s=11762\&e=png\&b=f0f2f5) ![image-20240430163946542.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43655f5086bb4f1ab58a3a6382c26f0e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1775\&h=281\&s=36023\&e=png\&b=2a1719) 报错了，为什么呢？对比路由表的数据，原来，组件模块的数据与公共路由的数据不一致 ![image-20240430160855268.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95f1b74d0a924409baf05a2d7df94b7a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1353\&h=607\&s=76914\&e=png\&b=282c34) 我们需要把模拟后端传过来的数据处理一下 ![image-20240430161212799.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49e7b86805e6417f89d9a7f688447de6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=970\&h=604\&s=80170\&e=png\&b=262a31) ```ts // router.ts import Layout from '@/layout/index.vue'; import type { RouteRecordRaw } from 'vue-router' /* 处理从后端传过来的路由数据 */ export const formatRoutes = (routes: any[]) => { const formatedRoutes: RouteRecordRaw[] = [] routes.forEach(route => { formatedRoutes.push( { ...route, component: Layout, // 主要是将这个 null -> 组件 children: route.children.map((child: any) => { return { ...child, component: () => import(`@/views${child.component}`), // 根据本地路径配置页面路径 } }), } ) }) return formatedRoutes; } ``` 再修改下 `permission.ts` ```Typescript import router from './router' import type { RouteRecordRaw } from 'vue-router' import { formatRoutes } from './utils/router' import { useAuthStore } from '@/store'; import { App } from 'vue'; // 路由加载前 router.beforeEach(async (to, from, next) => { const { menus } = useAuthStore() const routerList = menus routerList.forEach((route) => { router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表 }) next() }) // 路由跳转之后调用 router.afterEach((to) => { }) ``` `main.ts` 引入一下 import './permission' 可以正常访问了 ![image-20240430164159080.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a132acb9dc964b779c60bad0055b8ad2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1539\&h=246\&s=6635\&e=png\&b=f0f2f5) ## 按钮权限除了页面权限，外我们还有按钮权限可以通过自定义指令来完成，`permission.ts` 中定义一下 ![image-20240430164944266.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78ba2fc22a6b42189d5fee14865bb56d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=755\&h=228\&s=27049\&e=png\&b=262a31) ```ts /* 按钮权限 */ export function hasPermi(app: App) { app.directive('hasPermi', (el, binding) => { const { permissions } = useAuthStore() const { value } = binding const all_permission = '*:*:*' if (value && value instanceof Array && value.length > 0) { const permissionFlag = value const hasPermissions = permissions.some((permission: string) => { return all_permission === permission || permissionFlag.includes(permission) }) if (!hasPermissions) { el.parentNode && el.parentNode.removeChild(el) } } else { throw new Error('权限不存在') } }) } export const setupAuth = (app: App) => { hasPermi(app) } ``` 需要挂载到 `main.ts` ```ts import { createApp } from 'vue' import App from './App.vue' import { setupRouter } from './router/index' import ElementPlus from 'element-plus' import { createPinia } from 'pinia' import { setupAuth } from './permission' import 'element-plus/dist/index.css' import './permission' // 创建实例 const setupAll = async () => { const app = createApp(App) setupRouter(app) setupAuth(app) app.use(ElementPlus) app.use(createPinia()) app.mount('#app') } setupAll() ``` 还是在 `store` 那里加一下模拟数据 ```Typescript export const useAuthStore = defineStore("authState", { state: (): AuthStore => ({ menus: [ { path: "/routing", component: null, redirect: "user", children: [ { path: "/routing/user", component: "/user.vue", name: "用户管理", meta: {}, }, { path: "/routing/menu", component: "/menu.vue", name: "菜单管理", meta: {}, } ], name: "系统管理", meta: undefined, }, ], permissions: [ // '*:*:*', // 所有权限 'system:user:create', 'system:user:update', 'system:user:delete', ] }), }); ``` `user.vue`加入几个按钮，使用自定义指令 ```ts ``` `system:user:admin` 这个权限没有配置，无法显示 ![image-20240430165542815.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a34de67b38044b19d959d7421f1703f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1271\&h=229\&s=6897\&e=png\&b=f0f2f5) 加一下权限 ![image-20240430165757893.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd2b31002647489e85245407ecf35b3e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=821\&h=152\&s=7937\&e=png\&b=282c34) ![image-20240430165736044.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d6d4a8d6a2d45ebbfdaa8e23a60d5aa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1345\&h=236\&s=7604\&e=png\&b=f0f2f5) ## 扩展用户权限我们使用 `v-hasPermi`自定义指令，其原理是通过删除当前元素，来实现隐藏如果使用 `Element Plus` 的标签页呢我们在 src/views/home.vue 写一下基本样式 ```js ``` ![image-20240601152747411.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b552ab7e31946b7aa9e359ebed6cba0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1508&h=233&s=5895&e=png&b=f0f2f5) 我们加下按钮权限控制 ```js ``` ![image-20240601152918869.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8fdb6e13ec4c40d2bb1e20d934e95570~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1648&h=281&s=5522&e=png&b=f0f2f5) 因为这个权限我们没有配置，标签页内容隐藏了，这没问题但是，标签没隐藏啊，通常要是标签一没权限，应该是标签项、和标签内容都隐藏才对为什么会这样呢？我们在 `hasPermi` 自定义指令中，打印下获取到的元素 ![image-20240601153404381.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88027a3689c344c59985bcf6b5e63a37~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1285&h=657&s=106023&e=png&b=262a32) ![image-20240601153558816.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac26ae4db5f2457b94a7d3956e1211d1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=897&h=277&s=36946&e=png&b=fefdfd) id 为 `pane-first`、`pane-second` 元素对应位置在哪里，我们找一下需要先把指令去掉，因为元素都被我们删除的话，我们看不到具体DOM结构 ![image-20240601153923044.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2bff2f6935454ca2a9033a3bada04994~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=648&h=185&s=13530&e=png&b=292d35) ![image-20240601154032093.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/590c6dc94e774aa080411340b2106218~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1434&h=799&s=114682&e=png&b=eff2f5) ![image-20240601153558816.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f4f6dac840f470a85c1028318d5347c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=897&h=277&s=36946&e=png&b=fefdfd) 对比一下，明显可以看出 `hasPermi` 自定义指令获取到只是标签内容的元素那怎么办？解决办法一：根据当前元素，一层层找到标签项，然后删除，这样是可以。但是这样太麻烦了，也只能用于标签页，那要是其他组件有这样的问题咋办解决办法二：我们写一个函数判断权限是否存在，再通过 `v-if` 进行隐藏 ![image-20240601155249647.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ea6eec40af34063bafb7370d7963b6d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1670&h=567&s=72570&e=png&b=272b33) ```typescript export function checkPermi(value: string[]) { const { permissions } = useAuthStore() const all_permission = '*:*:*' if (value && value instanceof Array && value.length > 0) { const permissionFlag = value const hasPermissions = permissions.some((permission: string) => { return all_permission === permission || permissionFlag.includes(permission) }) if (!hasPermissions) { return false } return true } } ``` src/views/home.vue，引入下 `checkPermi` ```js ``` ![image-20240601155438278.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/086d26fd985c4276aca63b064ddea31c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1429&h=250&s=4509&e=png&b=f0f2f5) ## 小结页面权限不同用户，具有不同页面访问权限，对应权限的路由信息由后端返回。本地路由 + 后端传过来的路由 = 菜单路由按钮权限根据不同用户，后端传过来每个按钮的按钮权限字符串，前端根据自定义指令，判断该按钮权限字符串是否存在从而显示或者隐藏扩展一些特殊情况下，自定义指令隐藏无法满足我们想要的效果，我们可以定义一个公共函数检测权限是否存在，再通过 `v-if` 进行隐藏