vue设置全局路由守卫

你的名字 2024-04-19 08:57 89阅读 0赞

### 1，讲解 ###

### router.beforeEach路由跳转之前  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

router.beforeEach((to, from, next) => {
      console.log(to);//进入的页面（下一个页面）
      console.log(from);//离开之前的页面（上一个页面）
      console.log(next);//to
      next();//这个必须要先执行一遍next()方法，而且不能带参数，带参数会陷入死循环
      //判断登录，是否带token
      if (!to.meta.requireAuth) {
        next();
      } else if (localStorage.getItem("token")) {
        next();
      } else {
        next({
          path: "/Login",
          query: {
            redirect: to.fullPath
          }
        });
      }
    });

### 2，配置 ###

### 在router.js文件： ###

const router=  new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: [{
        path: '/',
        name: 'home',
        component: Home,  
        meta:{
          requiresAuth:true,// 是否需要登录
          keepAlive: true // 是否缓存组件
        }, 
        redirect: {
          name: 'Login'
        } 
      },
      {
        path: '/HomePage', // 首页面
        name: 'HomePage',
        component: () => import('./views/HomePage.vue'),
        redirect: {
          name: 'onlineQuery'
        } ,
        meta: {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
          title: "首页面",
          requiresAuth:true ,
          keepAlive: true  
        }
    
    },
     {
        path: '*', // 未匹配到路由时重定向
        redirect: '/',
        meta: {
            // auth: true,
            // keepAlive: true
        }
    }
    ]
    })
    
    
    //全局路由守卫
    router.beforeEach((to,from,next) => {
      if(to.meta.requiresAuth){
         // console.log(to.name)
           if(sessionStorage.getItem("token")){
             next()
           }else{
            //  next({name:'Login',query:{redirect:to.name}})
            next({
                      path: "/Login",
                      query: {
                          redirect: to.fullPath
                      }
                  });
           }
       }else{
         // console.log(to.name)
         next()
       }
     })
     
     export default router

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c4cb8fa2b339479d9af69cac3ef250a1.png