vue用户角色权限管理(vue登陆鉴权)

vue项目中实现了用户登录角色认证。不同的用户登录显示不同的菜单栏。效果如下：

使用管理员帐户登录即可显示

使用潇潇帐号登录：

而在xiaoxiao登录的系统中，如果在地址栏中手动输入“/user”，则不会显示只有请求admin用户后才会显示的用户管理页面。

实现思路如下：

1、用户登录时，后端返回的数据包含菜单数据。将菜单数据存储在vuex中，在侧边栏组件中获取vuex中存储的菜单数据，并根据数据动态生成侧边栏。

在这个项目中，我使用Mock来模拟数据。后端返回的接口数据如下：

importMockfrom'mockjs'exportdefault{getMenu:config={const{username,password}=JSON.parse(config.body)//首先判断用户是否存在//判断账号和密码是否对应if(username==='admin'密码==='admin'){return{code:20000,data:{menu:[{path:'/home',name:'home',label:'首页',icon:'s-home',url:'首页.vue'},{path:'/mall',name:'mall',label:'产品管理',icon:'视频播放',url:'Mall.vue'},{path:'/user',name:'用户',label:'用户管理',icon:'用户',url:'User.vue'},{label:'其他',icon:'位置',kids:[{path:'/page1',name:'page1',label:'Page1',icon:'设置',url:'PageOne.vue'},{path:'/page2',name:'page2',label:'Page2',icon:'设置',url:'PageTwo.vue'}]}],token:Mock.Random.guid(),message:'获取成功'}}}elseif(用户名==='潇潇'密码==='潇潇'){return{code:20000,data:{menu:[{path:'/home',name:'home',label:'首页',icon:'s-home',url:'Home.vue'},{path:'/video',name:'视频',label:'产品管理',icon:'视频播放',url:'商城.vue'}],token:Mock.Random.guid(),message:'获取成功'}}}else{return{code:-999,data:{message:'密码错误'}}}}}

在store/tab.js的状态中定义一个菜单数据，用于存储后端返回的菜单栏数据。在mutations中定义一个setMenu方法。登录成功后调用该方法，将后端返回的数据存入菜单中。中间

exportdefault{state:{//菜单栏数据menu:[]},mutations:{//设置菜单数据setMenu(state,val){state.menu=val},}}

在登录组件中，单击“登录”以调用后端接口并获取后端返回的数据。

//登录submit(){this.$refs.form.validate((valid)={if(valid){getMenu(this.form).then(({data})={console.log(data)if(data.code===20000){//获取菜单数据并存入storethis.$store.commit('setMenu',data.data.menu)}else{this.$message.error(data.data。消息）}}）}}）}}}

在commonAside中动态计算menudata，然后根据menudata生成菜单栏结构

这样不同的账号登录时可以显示不同的侧边栏。但是，当我们在地址栏中手动输入一些路径时，我们仍然可以访问它们。例如，在由Xiaoxiao登录的系统中，输入“/用户”仍显示。原因是项目中的路由表是硬编码的，就像router/index.js中注释掉的部分一样：

因此，我们需要做的是使用路由器。Addroute方法使内容动态的一部分。

代码如下所示：

仍在商店/tab.js中

定义一个动态添加路由的方法，遍历state中存储的菜单数据，改成这样

菜单：[{{path:'/home'，name:'home'，label:'home'，icon:'s-home'，url:'home.vue'}，{path:',icon:'视频播放',url:'Mall.vue'},{path:'/user',name:'用户',label:'用户管理',icon:'用户',url:'User.vue'},{label:“其他”，ICON:'位置'，儿童：[{path:'/page1'，name:'page1'，label:'page1'，icon:'，url:'，url:'pageone.vue'}，Page2'，label:'page2'，icon:'设置'，url:'pagetwo.vue'}]}]]]]

与注释的部分相同，然后致电router.addroute将内容添加到路由表中。

实现代码如下：

exportdefault{state:{//菜单栏数据menu:[]},mutations:{//设置菜单数据setMenu(state,val){state.menu=val},//动态注册路由addMenu(state,router){if(state.menu.length==0)return//组装动态路由数据constmenuArray=[]state.menu.forEach(item={if(item.children){item.children=item.children.map(childItem={childItem.component=()=import(`./views/${childItem.url}`)console.log(childItem.component)returnchildItem})console.log(item.children)menuArray.push(.item.children)}else{item.component=()=import(`./views/${item.url}`)menuArray.push(item)}console.log(menuArray,'menuArray')//动态添加路由菜单菜单。foreach}）}}}}}}}}}}}}}}}}}}}}}

由于使用了路由器的API，因此在定义addMenu方法时必须将路由实例作为参数传入。

在Login.vue组件中，登录成功后会调用addMenu方法：

//登录submit(){this.$refs.form.validate((valid)={if(valid){getMenu(this.form).then(({data})={console.log(data)if(data.code===20000){//将token信息存储在cookie中，用于不同页面之间的通信Cookie.set('token',data.data.token)//获取菜单数据并存储到store中this.$store.commit('setMenu',data.data.menu)//在路由表中动态添加数据this.$store.commit('addMenu',this.$router)//跳转到首页this.$router.push('/home')}else{this.$message.error(data.data.message)}})}})}

上述操作后，路由表中的数据已成功地动态生成。接下来，设置路由拦截：

在路由器/index.js中：

//添加前导航罩路由器。用户未登录，应该跳转到登录页面if(!tokento.name!=='login'){next({name:'login'})}elseif(tokento.name==='login'){//token存在，说明用户已登录next({name:'home'})}else{next()}})

这样就实现了动态路由，但是存在两个问题：

1.刷新页面，vuex中的菜单会初始化为[]

解决方案：关于vuex的持久化，请参考我的另一篇博客：

vuex持久存储插件

2.刷新页面，路由表数据也会被重置。

解决方案：

在main.js中调用AddMenu方法：