#VUE3 后台管理系统「路由鉴权」

1import Layout from "../layout/Index.vue";
2import RouteView from "../components/RouteView.vue";
3
4const layoutMap = [
5	{
6		path: "/",
7		name: "Index",
8		meta: { title: "控制台", icon: "home" },
9		component: () => import("../views/Index.vue")
10	},
11	{
12		path: "/data",
13		meta: { title: "数据管理", icon: "database" },
14		component: RouteView,
15		children: [
16			{
17				path: "/data/list",
18				name: "DataList",
19				meta: { title: "数据列表", roles: ["admin"] },
20				component: () => import("../views/data/List.vue")
21			},
22			{
23				path: "/data/table",
24				name: "DataTable",
25				meta: { title: "数据表格" },
26				component: () => import("../views/data/Table.vue")
27			}
28		]
29	},
30	{
31		path: "/admin",
32		meta: { title: "用户管理", icon: "user" },
33		component: RouteView,
34		children: [
35			{
36				path: "/admin/user",
37				name: "AdminAuth",
38				meta: { title: "用户列表", roles: ["admin"] },
39				component: () => import("../views/admin/AuthList.vue")
40			},
41			{
42				path: "/admin/role",
43				name: "AdminRole",
44				meta: { title: "角色列表" },
45				component: () => import("../views/admin/RoleList.vue")
46			}
47		]
48	},
49	{
50		path: "user",
51		name: "User",
52		hidden: true /* 不在侧边导航展示 */,
53		meta: { title: "个人中心" },
54		component: () => import("../views/admin/User.vue")
55	},
56	{
57		path: "/error",
58		name: "NotFound",
59		hidden: true,
60		meta: { title: "Not Found" },
61		component: () => import("../components/NotFound.vue")
62	}
63];
64
65const routes = [
66	{
67		path: "/login",
68		name: "Login",
69		meta: { title: "用户登录" },
70		component: () => import("../views/Login.vue")
71	},
72	{
73		path: "/",
74		component: Layout,
75		children: [...layoutMap]
76	},
77	{ path: "/*", redirect: { name: "NotFound" } }
78];
79
80export { routes, layoutMap };

1// vue-router4.0版写法
2import { createRouter, createWebHistory } from "vue-router";
3import { decode } from "js-base64";
4import { routes } from "./router";
5import NProgress from "nprogress";
6import "nprogress/nprogress.css";
7
8NProgress.configure({ showSpinner: false });
9
10const router = createRouter({
11	history: createWebHistory(),
12	routes: [...routes],
13	scrollBehavior(to, from, savedPosition) {
14		if (savedPosition) {
15			return savedPosition;
16		} else {
17			return { top: 0 };
18		}
19	}
20});
21
22// 路由拦截与下方vue-router3.x写法相同

1// vue-router3.x版写法
2import Vue from "vue";
3import VueRouter from "vue-router";
4import { decode } from "js-base64";
5import { routes } from "./router";
6import NProgress from "nprogress";
7import "nprogress/nprogress.css";
8
9NProgress.configure({ showSpinner: false });
10
11Vue.use(VueRouter);
12
13const router = new VueRouter({
14	mode: "history",
15	base: process.env.BASE_URL,
16	routes: [...routes],
17	scrollBehavior(to, from, savedPosition) {
18		if (savedPosition) {
19			return savedPosition;
20		} else {
21			return { top: 0 };
22		}
23	}
24});
25
26router.beforeEach((to, from, next) => {
27	NProgress.start();
28	const jwt = sessionStorage.getItem("jwt") || "";
29
30	document.title = jwt ? (to.meta.title ? to.meta.title + " - 管理应用" : "管理系统") : "系统登录";
31	if (to.path === "/login") {
32		!!jwt ? next("/") : next();
33	} else {
34		if (from.path === "/login" && !jwt) {
35			NProgress.done(true);
36			next(false);
37			return;
38		}
39		if (!!jwt) {
40			if (to.meta.hasOwnProperty("roles")) {
41				let roles = to.meta.roles || [],
42					{ role } = jwt && JSON.parse(decode(jwt));
43				roles.includes(role) ? next() : next("/error");
44				return;
45			}
46			next();
47		} else {
48			next("/login");
49		}
50	}
51});
52
53router.afterEach(() => {
54	NProgress.done();
55});
56
57export default router;

1/* 处理权限 */
2export const hasPermission = (route, role) => {
3	if (route["meta"] && route.meta.hasOwnProperty("roles")) {
4		return route.meta.roles.includes(role);
5	}
6	return true;
7};
8
9/* 过滤数组 */
10export const filterAsyncRouter = (routers, role) => {
11	let tmp = [];
12	tmp = routers.filter(el => {
13		if (hasPermission(el, role)) {
14			if (el["children"] && el.children.length) {
15				el.children = filterAsyncRouter(el.children, role);
16			}
17			return true;
18		}
19		return false;
20	});
21	return tmp;
22};

1import Vue from "vue";
2import Vuex from "vuex";
3import { layoutMap } from "../router/router";
4import { filterAsyncRouter } from "../utils/tool";
5import createPersistedState from "vuex-persistedstate";
6import SecureLS from "secure-ls";
7import { CLEAR_USER, SET_USER, SET_ROUTES } from "./mutation-types";
8
9Vue.use(Vuex);
10
11const state = {
12	users: null,
13	routers: []
14};
15
16const getters = {};
17
18const mutations = {
19	[CLEAR_USER](state) {
20		state.users = null;
21		state.routers.length = 0;
22	},
23	[SET_USER](state, payload) {
24		state.users = payload;
25	},
26	[SET_ROUTES](state, payload) {
27		state.routers = payload;
28	}
29};
30
31const ls = new SecureLS({
32	encodingType: "aes" /* 加密方式 */,
33	isCompression: false /* 压缩数据 */,
34	encryptionSecret: "vue" /* 加密密钥 */
35});
36
37const actions = {
38	clearUser({ commit }) {
39		commit(CLEAR_USER);
40	},
41	setUser({ commit }, payload) {
42		let deepCopy = JSON.parse(JSON.stringify(layoutMap)),
43			accessedRouters = filterAsyncRouter(deepCopy, payload.role);
44		commit(SET_USER, payload);
45		commit(SET_ROUTES, accessedRouters);
46	}
47};
48
49const myPersistedState = createPersistedState({
50	key: "store",
51	storage: window.sessionStorage,
52	// storage: {
53	//     getItem: state => ls.get(state),
54	//     setItem: (state, value) => ls.set(state, value),
55	//     removeItem: state => ls.remove(state)
56	// } /* 永久存储 */
57	reducer(state) {
58		return { ...state };
59	}
60});
61
62export default new Vuex.Store({
63	state,
64	getters,
65	mutations,
66	actions
67	// plugins: [myPersistedState]
68});