vue项目中实现用户登录角色鉴权，不同的用户登录展示不同的菜单栏_vue+js实现不同用户展示不同的菜单栏

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}
}

在store/tab.js的state中定义一个menu数据用来存储后端返回的菜单栏数据，在mutations中定义一个setMenu方法，在登录成功的时候调用该方法，把后端返回的数据存入menu中

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

在Login.vue组件中，点击登录调用后端接口，拿到后端返回的数据

//登录
submit(){
this.$refs.form.validate((valid) => {
if(valid){
getMenu(this.form).then(({ data }) => {
console.log(data)
if(data.code === 20000){

                        //获取菜单的数据存入store中
                        this.$store.commit('setMenu',data.data.menu)
                        
                    }else{
                        this.$message.error(data.data.message)
                    }
                })
            }
        })
    }

在 CommonAside.vue中动态计算menuData，然后根据menuData生成菜单栏结构


![](https://img-blog.csdnimg.cn/449ccfbfa5f043d6a7f152f4131751a3.png)


这样就实现了不同账号登录展示不同的侧边栏。但是，当我们在地址栏中手动输入一些路径，仍能够访问到。比如，在xiaoxiao登录的系统中，输入'/user'仍然显示。原因是项目中的路由表是写死了，就像router/index.js中的注释掉的这部分内容这样：


![](https://img-blog.csdnimg.cn/794f61b48e254a8091de72ecb9ef6e22.png)


 


 因此，接下来我们要做得就是利用router.addRoute方法，把这部分内容变成动态的。


代码如下：


还是在store/tab.js中


定义动态添加路由的方法，遍历存储在state中的menu数据，把它从这样

      menu: [
        {
          path: '/home',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home.vue'
        },
        {
          path: '/mall',
          name: 'mall',
          label: '商品管理',
          icon: 'video-play',
          url: 'Mall.vue'
        },
        {
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
          url: 'User.vue'
        },
        {
          label: '其他',
          icon: 'location',
          children: [
            {
              path: '/page1',
              name: 'page1',
              label: '页面1',
              icon: 'setting',
              url: 'PageOne.vue'
            },
            {
              path: '/page2',
              name: 'page2',
              label: '页面2',
              icon: 'setting',
              url: 'PageTwo.vue'
            }
          ]
        }
      ]

变成和注释掉的那部分一样，然后调用router.addRoute（）把内容添加到路由表中。


![](https://img-blog.csdnimg.cn/3c7b01b9d2af49d0b8ea04528cd0759b.png)


 实现代码如下：

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

    //动态注册路由
    addMenu(state,router){
        if(state.menu.length == 0 ) return

        //组装动态路由的数据
        const menuArray = []
        state.menu.forEach(item => {
            if(item.children){
                item.children = item.children.map(childItem => {
                    childItem.component = () => import(`../views/${childItem.url}`)
                    console.log(childItem.component)
                    return childItem
                })
                console.log(item.children)
                menuArray.push(...item.children)
            }else{
                item.component = () => import(`../views/${item.url}`)
                menuArray.push(item)
            }

            console.log(menuArray,'menuArray')

            //路由的动态添加
            menuArray.forEach(item => {
                router.addRoute('main',item)
            })
        })

    }


}

}

因为要用到router的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)
                    }
                })
            }
        })
    }

经过上边操作路由表中的数据已经成功动态生成了，接下来设置路由拦截：


在router/index.js中：

//添加前置导航守卫
router.beforeEach((to, from, next) => {
// 判断token存不存在
const token = Cookie.get(‘token’)
// token不存在，说明当前用户是未登录，应该跳转至登录页
if(!token && to.name !== ‘login’){
next({name:‘login’})
}else if (token && to.name === ‘login’){ //token存在，说明用户已经登录了
next({name:‘home’})

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-S9AWTMmC-1715845900792)]