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