### @登录开发 #### 登录成功后将用户信息写入Vuex ```js const submitForm = formEl => { if (!formEl) return; formEl.validate(async valid => { if (valid) { console.log("submit!"); const username = ruleForm.username; const password = ruleForm.pass; console.log(username, password); /* 执行登录，并将结果丢vuex */ const { msg, user, token } = await login(username, password); ElMessage({ message: msg, type: user ? "success" : "error", }); /* 如果登录成功跳转 */ if (user) { /* 将user和token丢vuex */ store.dispatch("saveUserInfo", { user, token }); setTimeout(() => { router.push("/"); }, 500); } } else { console.log("error submit!"); return false; } }); }; ``` ### @接口权限 #### 概述 - [x] axios的响应拦截器里发现返回码是401/403，一脚踹到登录页; #### axios的所有请求均携带token ```js /* 请求拦截器：统一添加鉴权token */ instance.interceptors.request.use( function (config) { // 在发送请求之前做些什么 config.headers["Authorization"] = `Bearer ${store.state.token}`; return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); ``` #### 服务端响应无权限时跳转登录页 ```js instance.interceptors.response.use( function (res) { if(res.data.code===401 || res.data.code===403){ router.push("/login") } return res.data; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); ``` ### @路由权限 #### 概述 - [x] 方案一：加载完整路由表，加全局守卫判断meta，无权限时一脚踹到登录页; - [x] 方案二：先挂载公共路由表，登录后再addRoute动态挂载权限路由表； #### 方案一：给路由加权限限制 ```js /* 热门城市 */ { path: "/cinema/hot", name: "hot", // 当前路由的访问需要管理员权限 meta: { menuIndex: "2-0-0", adminRequired: true }, component: () => import("../views/cinema/HotCity.vue"), }, /* 所有城市 */ { path: "/cinema/all", name: "allcity", // 当前路由的访问需要管理员权限 meta: { menuIndex: "2-1", adminRequired: true }, component: () => import("../views/cinema/AllCity.vue"), }, ``` #### 方案一：在全局路由守卫中对无权限用户跳转登录页 ```js /* 路由权限A方案：挂载所有路由 + 全局路由守卫判断权限 */ router.beforeEach((to, from, next) => { if (to.meta.adminRequired) { // 是管理员就放行 if (store.state.user && store.state.user.admin) { next(); } else { // 否则踹到登录页 next({ name: "login" }); } } else { // 不需要管理员权限直接放行 next(); } }); ``` #### 方案二：先挂载公共路由 ***注意公共路由表以404结尾*** *router/routes/publicRoutes.js* ```js export default [ { path: "/", redirect: "/data" }, /* demos */ { path:"/demos", redirect:"/demos/element" }, { path: "/demos", name: "demos", meta: { menuIndex: "4" }, component: () => import("@demos/Index.vue"), children: [ { path: "element", name: "element", component: () => import("@demos/ElementDemo.vue"), }, { path: "vuex", name: "vuex", component: () => import("@demos/VuexDemo.vue"), }, ], }, ... /* 404 */ { path: "/:pm(.*)*", name: "notfound", component: () => import("@views/NotFound.vue"), }, ]; ``` #### 方案二：先挂载公共路由表 *router/index.js* ```js import publicRoutes from "./routes/publicRoutes"; import adminRoutes from "./routes/adminRoutes"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [...publicRoutes], }); ``` #### 方案二：在全局守卫中动态挂载权限路由表 ```js /* 路由权限B方案：挂载公共路由 + 全局路由守卫判断权限 + 动态挂载权限路由表 */ router.beforeEach((to, from, next) => { console.log("beforeEach",store.state.user); // 如果发现是管理员，就动态挂载管理员路由 if (store.state.user && store.state.user.admin) { // 如果权限路由表未挂载就挂载之 adminRoutes.forEach(r => { // 未挂载就挂载 if (!router.hasRoute(r)) { router.addRoute(r); console.log(`挂载${r}完毕`); } else { console.log(`${r}已挂载`); } }); } // 放行 console.log("放行", to); next(); }); ``` ### @菜单权限 #### 概述 - [x] 由服务端返回菜单（或前端登录后从本地调取对应菜单）并动态渲染; #### 从后端或本地获取到与用户角色匹配的菜单 ```js [ { "name":"数据看板", "path":"/data", "iconName":"PieChart" }, { "name":"影片管理", "iconName":"Film", "submenu":[ { "name":"正在热映", "iconName":"VideoCamera", "path":"/film/playing" }, { "name":"即将上映", "iconName":"Loading", "path":"/film/coming" } ] }, { "name":"影院管理", "iconName":"PictureFilled", "submenu":[ { "name":"热门城市", "iconName":"Star", "submenu":[ { "name":"北京", "path":"/cinema/hot" }, { "name":"上海", "path":"/cinema/hot" }, { "name":"广州", "path":"/cinema/hot" } ] }, { "name":"所有城市", "iconName":"Location", "path":"/cinema/all" } ] }, { "name":"用户管理", "iconName":"User", "path":"/user" }, { "name":"案例管理", "iconName":"Grid", "path":"/demos" } ] ``` #### 动态渲染该菜单 ```js import adminMenu from "@api/menu.json"; const menu = ref(adminMenu) ``` ```html

``` #### 送大家一个超好使的菜单组件 ```js npm i @steveouyang/super-ep ``` ```js import { EpMenu } from "@steveouyang/super-ep" ``` ***递归菜单** 封装原理戳这里↓↓↓（面试很加分的哦 (｀・ω・´)~）* [# Vue3电影中后台开发纪实（五）：组件封装](https://juejin.cn/post/7171144597001732126) ### @按钮权限 #### 概述 - [x] 隐藏无权限的按钮； - [x] v-if没权限就不显示； - [x] 自定义指令v-auth判断到无权限就直接删除当前按钮； #### Vuex封装出是否管理员接口 ```js const store = createStore({ /* 状态（一手数据） */ state() { return { count: 0, user: null, token: null, }; }, /* 二手数据：从一手数据换算而来 */ // store.getters.isAdmin getters: { isAdmin(state){ return state.user && state.user.admin } }, ... } ``` #### v-if判断不是管理员就不显示按钮 ```js 删除 ``` #### 撸一个自定义指令来判断管理员权限如果不是管理员就直接删除当前元素/组件 ```js import store from "@store/index"; export default { name: "admin", /* 元素挂载时 */ mounted(el, binding, vnode) { console.log("admin mounted"); // 看看当前用户是否管理员 if (!store.getters.isAdmin) { // 不是就el删除 el.remove(); } }, }; ``` 全局注册一下 ```js import admin from "@directives/admin"; /* 注册全局自定义指令 */ app.directive(admin.name, admin); ``` 在元素/组件上使用：不是管理员就直接删除目标元素 ```html 导出 ``` ### @各种方案的利弊比较 - **接口控制策略** 是服务端天然存在的，前端是否做配套处置看具体业务需求； - **全路由表策略** 适用于比较小型的工程； - **半路由表策略**（先加载公共路由表，登录后再动态补充加载权限路由表），适用于中大型项目，先期只加载一部分路由表能提升一些性能； - 无论全路由策略还是半路由策略，由于全局守卫的存在，性能都好不到哪去； - **菜单策略** 一次性完成大面积的访问权限控制，作为一种宏观权限控制策略，个人认为要比路由控制更可取； - **按钮显隐策略** 适合打扫一些边边角角的地方，是一种有效且必要的补充机制；

# [😈](https://emojipedia.org/smiling-face-with-horns/) ***：点赞收藏加关注了吗就走？！*** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1eb7eb4b4d034c2794f362a4fecafa7c~tplv-k3u1fbpfcp-watermark.image?) [本项目源码](https://gitee.com/steveouyang/manager-2207) ***watch,follow,fork！！！*** ***祝大家撸码愉快~***