vue2实现后台帐号权限分配

最新推荐文章于 2025-04-18 21:42:01 发布

rayshaan0123

最新推荐文章于 2025-04-18 21:42:01 发布

阅读量621

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/rayshaan0123/article/details/120541451

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何实现动态加载路由和根据用户权限设置不同菜单的过程。首先，设置了公共路由，然后在登录后获取用户权限信息，将权限菜单转换为路由格式并追加到路由列表。接着，在Vuex中定义相关方法，用于生成并保存权限路由。最后，通过调用Vuex中的方法和$router.addRoutes动态注册路由，并跳转到对应权限的第一个页面。测试结果显示，不同用户登录后能成功显示对应数量的权限菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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}`)
        }
    }
}