Vue 开发实战实战篇 # 32：如何使用路由管理用户权限

Posted 2022-09-26 凯小默

说明

【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>