vue2实现后台帐号权限分配

1.思路

• router.js中加载公共路由
• 登录后/首次加载页面获取到该帐号的权限菜单，注册到router.js中

2.加载公共路由

/*
	login和home是所有用户都能看到的，默认加载这两个页面
*/
//注意导出，要在vuex中使用，新注册的路由都在home的children中
export const routes=[
  {
    path: '/',
    name: 'login' ,
    component:login,
  },
  {
    path: '/home',
    name: 'home' ,
    component:home,
    children:[]
  }
]

3.获取用户权限

/*
	该方法一般放在login.vue中，登陆成功后调用(也可以让后端把权限菜单放在登录接口中，登录成功后直接使用即可)，由于项目结构比较特殊，我这里放在router.js中
*/
const userRoutes=[]

async function getList(){
	//调用后端接口拿到权限
  const res=await loginApi.getUserByToken({});
  if(res.state==200){
    let list=res.data.pddCurrentMenuList
    /*
      循环成router的结构  
      {
      	path:"",
      	name:"",
      	component:""
	  }
	*/
    for(let i=0;i<list.length;i++){
      let route={
          path:list[i].url,
          name:list[i].name,
          component:()=>import(`@/components${list[i].url}`)
      }
      userRoutes.push(route)
    }
  }
}
getList()


//导出该权限数组(vuex中使用)
export const userRoutesList=userRoutes

4.vuex定义方法

import Vue from 'vue'
import  Vuex from 'vuex'
//导入router中的默认路由和权限路由
import  { routes,userRoutesList } from '@/router'
Vue.use(Vuex)
var tempStore ={
    state: {
        addRouters: [],
        title:""
    },
    mutations: {
    //项目中其他地方用到，与权限分配无关
       setTitle(state,title){
        state.title=title
       },
       //追加到home的children中
        generateAddRouter(state,routers){
            routes[1].children = routers;
            //state中保存权限路由，方便验证切换帐号
            state.addRouters = routes;
        }
    },
    actions: {
        /* 对外提供生成路由接口 */
        generateAddRouters({commit}){
            commit("generateAddRouter",userRoutesList);
        }
    }
}
export default new Vuex.Store(tempStore);

5.调用方法，追加路由

created(){
    this.getRouterList()
},
methods:{
    async getRouterList(){
        let data={}
        const res=await loginApi.getUserByToken(data);
        if(res.state==200){
            this.$store.commit('setTitle',res.data.pddCurrentMenuList[0].name)
            this.active=res.data.pddCurrentMenuList[0].name
            this.routerList=res.data.pddCurrentMenuList
			
			//调用vuex中action的方法
            this.$store.dispatch("generateAddRouters");
            //注册追加路由
            this.$router.addRoutes(this.$store.state.addRouters);
            //跳转到权限路由第一项
            this.$router.push(`${this.routerList[0].url}`)
        }
    }
}

6.测试结果

• 加载登录页，还没追加路由
  
• 登录后，添加成功，该用户有11个权限菜单
  
• 切换帐号验证，该用户有8个权限页面