vue导航守卫根据登录权限不同显示不同菜单

最新推荐文章于 2023-03-06 09:15:59 发布

房东的猫〃

最新推荐文章于 2023-03-06 09:15:59 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/Landlord_cat/article/details/107757894

版权

本文介绍了如何使用Vue的导航守卫实现根据用户登录权限动态渲染菜单的功能，通过守卫控制不同角色的页面访问，确保菜单显示与用户权限匹配。

摘要由CSDN通过智能技术生成

// 全局路由守卫 
router.beforeEach((to, from, next) => {
     
    // console.log('====beforeEach========'+ to.path)
    var hasToken = Cookies.get('token')
    var userId = sessionStorage.getItem('id')
    if(to.path === '/login'){
   
        next()
        return
    }
    // phone 
    const adminPhone = sessionStorage.getItem('phone')
    if(to.path === '/vlog'){
    
        if(adminPhone == '18550100229'){
   
            next()    
        }else{
   
            next({
   path:'/404'})
            return
        }
    }else{
      
       next()
    }
    
   if(hasToken && userId){
   
       if(to.path === '/login'){
   
           next({
   path:'/'})
       }else{
   
           // 判断权限
           const Role = sessionStorage.getItem('userRole')
           if(JSON.stringify