vue配置路由未登录自动跳转到登录页

配置路由

定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Index',
      component: Index,
      meta: { 
         requireAuth: true    // 添加表示需要验证
      }
     }
 ]
})

在mian.js添加路由守卫方法

未登录则跳转到登录页，也可以通过axios的响应拦截器去实现,但是会先在当前页面渲染一下,再跳转到登录页,会有个闪动的现象，这里通过路由守卫的方式,不会在当前页闪现一下,但是需要在每个路由组件添加一个是否需要登录的标识位,如本项目中的requireAuth字段

router.beforeEach((to, from, next) => { 
  if (to.matched.some((auth) => auth.meta.requireAuth)) { // 判断该路由是否需要登录权限
      let token = Cookies.get("token");
      if (token) {  // 判断当前的token是否存在，登录存入的token
          next();
      } else { 
         next({
            path: "/login",
           });
      }
  } else {
      next();
  }
})