element-admin路由权限配置详解(一)
1. 路由文件改造(router/index.js)
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
// 1、划分路由
// 基本路由,也就是所有角色都需要
export baseRoutes = [
{
path: "/login",
name: "login",
component: () => import("@/views/login/login")
},
{
path: "*",
name: "404",
redirct: "/404",
component: () => import("@/views/404"),
hidden: true
}
]
// 超级管理员
export adminRoutes = [
// 这里省略超级管理员路由配置,自行脑补
...
]
// 普通管理员
export generalRoutes = [
// 这里省略普通管理员路由配置,自行脑补
...
]
const createRouter = () =>
new Router({
scrollBehavior: () => ({ x: 0 }),
routes: baseRouter
});
const router = createRouter();
export default router;
2、store/modules/permission.js
通过store,获取到用户角色,将不同的routes添加到state.routes
import { baseRoutes, adminRoutes, generalRoutes } from '@/router';
const state = {
addRoutes:[],
routes:[]
}
const mutations = {
SET_ROUTES: (state,addRoutes) => {
state.addRoutes = addRoutes;
state.routes = baseRoutes.concat(addRoutes);
}
}
const actions = {
// 生产路由
generateRoutes({ commit,rootState}) {
return new Promise(resolve => {
let routes = [];
if (rootState.user.role=== 'admin') {
routes= adminRoutes || []
} else if(rootState.user.role=== 'general') {
routes= generalRoutes || []
}
commit('SET_ROUTES', routes)
resolve(routes)
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
3、src/permission.js
通过路由全局守卫router.beforeEach判断用户是否登录,登录成功调用generateRoutes去添加routes
import router from "./router";
import store from "./store";
// 页面加载的进度条,很好用
import NProgress from "nprogress";
import "nprogress/nprogress.css";
router.beforeEach( async(to, from, next) => {
// start progress bar
NProgress.start();
// 获取token
const token = localStorage.getItem('token');
// 判断token是否存在,不存在去登录
if (!token) {
next("/login");
NProgress.done();
} else {
// 判断当前页面是否登录页面
if (to.path === '/login') {
next();
NProgress.done();
} else {
const hasGetUserInfo = store.getters.name
if (!hasGetUserInfo) {
try {
// get user info
await store.dispatch('user/getInfo')
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
next()
NProgress.done()
}
}
// 判断路由是否添加到permission中
if(!store.state.permission.addRoutes.length) {
// 调用路由生成函数获取路由
const routes = await store.dispatch('permission/generateRoutes');
// 遍历添加路由
for(let i=0; i<routes.length; i++) {
router.addRoute(routes[i])
}
next({path: to.path, query: to.query, replace: true});
} else {
next()
}
NProgress.done();
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done();
});
4、main.js加载permission.js
import Vue from "vue";
import store from "./store";
import router from "./router";
...
// 这里需要放到router之后
import "@/permission";
new Vue({
el: "#app",
router,
store,
render: h => h(App)
});
原文链接:https://blog.csdn.net/qq_18840283/article/details/122689915