说明
【Vue 开发实战】学习笔记。
效果
访问没有权限的路由跳转到403页面
菜单也是根据权限进行展示，比如是user用户没有表单的权限访问
auth.js 权限校验文件
export function getCurrentAuthority() { return ["user"]; } export function check(authority) { const current = getCurrentAuthority(); return current.some(item => authority.includes(item)); } export function isLogin() { const current = getCurrentAuthority(); return current && current[0] !== "guest"; }
403 页面
<template> <div>403页面</div> </template> <script> export default {}; </script> <style></style>
路由配置页面
import Vue from "vue"; import VueRouter from "vue-router"; import NProgress from "nprogress"; import "nprogress/nprogress.css"; import { notification } from "ant-design-vue"; import NotFound from "../views/404"; import Forbidden from "../views/403"; import findLast from "lodash/findLast"; import { check, isLogin } from "../utils/auth"; Vue.use(VueRouter); const routes = [ { path: "/user", hideInMenu: true, component: () => import(/* webpackChunkName: "layout" */ "../layouts/UserLayout"), children: [ { path: "/user", redirect: "/user/login" }, { path: "/user/login", name: "login", component: () => import(/* webpackChunkName: "user" */ "../views/User/Login"), }, { path: "/user/register", name: "register", component: () => import(/* webpackChunkName: "user" */ "../views/User/Register"), } ], }, { path: "/", meta: { authority: ["user", "admin"]}, component: () => import(/* webpackChunkName: "layout" */ "../layouts/BasicLayout"), children: [ { path: "/", redirect: "/dashboard" }, { path: "/dashboard", redirect: "/dashboard/analysis" }, { path: "/dashboard", name: "dashboard", meta: { icon: "dashboard", title: "仪表盘" }, component: { render: h => h("router-view")}, children: [ { path: "/dashboard/analysis", name: "analysis", meta: { title: "分析页" }, component: () => import(/* webpackChunkName: "dashboard" */ "../views/Dashboard/Analysis"), }, ] }, { path: "/form", name: "form", meta: { icon: "form", title: "表单", authority: ["admin"] }, component: { render: h => h("router-view")}, children: [ { path: "/form", redirect: "/form/basic-form" }, { path: "/form/basic-form", name: "basicform", meta: { title: "基础表单" }, component: () => import(/* webpackChunkName: "form" */ "../views/Forms/BasicForm"), }, { path: "/form/step-form", name: "stepform", hideChildrenInMenu: true, meta: { title: "分步表单" }, component: () => import(/* webpackChunkName: "form" */ "../views/Forms/StepForm"), children: [ { path: "/form/step-form", redirect: "/form/step-form/info" }, { path: "/form/step-form/info", name: "info", component: () => import(/* webpackChunkName: "form" */ "../views/Forms/StepForm/Step1"), }, { path: "/form/step-form/confirm", name: "confirm", component: () => import(/* webpackChunkName: "form" */ "../views/Forms/StepForm/Step2"), }, { path: "/form/step-form/result", name: "result", component: () => import(/* webpackChunkName: "form" */ "../views/Forms/StepForm/Step3"), }, ] }, ] } ], }, { path: "/403", name: "403", hideInMenu: true, component: Forbidden }, { path: "*", name: "404", hideInMenu: true, component: NotFound } ]; const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes }); // 路由守卫 router.beforeEach((to, from, next) => { if(to.path !== from.path) { NProgress.start(); } // 找到最近匹配的那个 const record = findLast(to.matched, record => record.meta.authority); if(record && !check(record.meta.authority)) { if(!isLogin() && to.path !== "/user/login") { next({ path: "/user/login" }); }else if(to.path !== "/403"){ notification.error({ message: "403", description: "你没有权限访问，请联系管理员" }); next({ path: "/403" }); } NProgress.done(); } next(); }) router.afterEach((to, from) => { NProgress.done(); }) export default router;
侧边栏权限 SiderMenu.vue
<template> <div style="width: 256px"> <a-menu :selectedKeys="selectedKeys" :openKeys.sync="openKeys" mode="inline" :theme="theme" > <template v-for="item in menuData"> <a-menu-item v-if="!item.children" :key="item.path" @click="() => $router.push({path: item.path, query: $router.query})" > <a-icon v-if="item.meta.icon" :type="item.meta.icon" /> <span>{{ item.meta.title }}</span> </a-menu-item> <sub-menu v-else :key="item.path" :menu-info="item" /> </template> </a-menu> </div> </template> <script> import SubMenu from "./SubMenu.vue"; import { check } from "../utils/auth"; export default { props: { theme: { type: String, default: "dark" } }, components: { "sub-menu": SubMenu }, data() { this.selectedKeysMap = {}; this.openKeysMap = {}; const menuData = this.getMenuData(this.$router.options.routes) return { collapsed: false, menuData, selectedKeys: this.selectedKeysMap[this.$route.path], openKeys: this.collapsed ? [] : this.openKeysMap[this.$route.path] }; }, watch: { "$route.path": function(val) { this.selectedKeys = this.selectedKeysMap[val]; this.openKeys = this.collapsed ? [] : this.openKeysMap[val]; } }, methods: { getMenuData(routes = [], parentKeys = [], selectedKeys) { const menuData = []; for(let item of routes) { if(item.meta && item.meta.authority && !check(item.meta.authority)) { break; } if(item.name && !item.hideInMenu) { this.openKeysMap[item.path] = parentKeys; this.selectedKeysMap[item.path] = [selectedKeys || item.path]; const newItem = {...item}; delete newItem.children; if(item.children && !item.hideChildrenInMenu) { newItem.children = this.getMenuData(item.children, [...parentKeys, item.path]); }else{ this.getMenuData( item.children, selectedKeys ? parentKeys : [...parentKeys, item.path], selectedKeys || item.path ); } menuData.push(newItem); }else if( !item.hideInMenu && !item.hideChildrenInMenu && item.children ) { menuData.push(...this.getMenuData(item.children, [...parentKeys, item.path])); } } return menuData; } }, }; </script>
