说明
【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,) => {
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:">
<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 = [],) {
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>
