vue路由守卫

vue路由守卫 - 全局（router.beforeEach((to, from, next) =>来判断登录和路由跳转状态）

vue中用路由守卫来做是否登陆判断，此处我以后台管理项目为例，如下图：

 主要方法：

• to：进入到哪个路由去
• from：从哪个路由离开
• next：路由的控制参数，常用的有next(true)和next(false)

首先判断进入的是否是login页面？然后再判断是否已经登陆？
已经登陆了就进入你要跳转的页面，没登录就进入login页面

为了更加明显一点，我将页面命名的简单一些，ps：

• Login.vue是登陆页面
• Index.vue是全局页面（包含公共导航组件）
  A.vue是普通页面（此处我做为首页）
  B.vue是普通页面
• 404.vue是走丢了的404页面

  //router.js
  import Vue from 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router);
  
  const children = [
    {
      path: 'a',
      name: 'a',
      component: () => import('./views/A.vue'),
      meta: {
        title: 'a页面',
        keepAlive: false // 无缓存
      }
    },
    {
      path: 'b',
      name: 'b',
      component: () => import('./views/B.vue'),
      meta: {
        title: 'b页面',
        keepAlive: true // 有缓存
      }
    },
    {
      path: '404',
      name: '404',
      component: () => import('./components/404.vue')
    }
  ];
  const router =  new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      { path: '/', redirect: '/a' },
      { path: '*', redirect: '/404' },
      {
        path: '/login',
        name: 'login',
        component: () => import('./components/Login.vue')
      },
      {
        path: '/',
        component: () => import('./components/Index.vue'), //index是上图左边的公共菜单
        children  //此处是站内页面，页面在右侧container里展示
      }
    ]
  });
  router.beforeEach((to, from, next) => {
    const isLogin = sessionStorage.getItem('isLogin'); //获取本地存储的登陆信息
    if (to.name == 'login') { //判断是否进入的login页
      if (isLogin == "true") {  //判断是否登陆
        next({ name: 'a'});  //已登录，跳转首页（a页面）
      } else {
        next();  //没登录，继续进入login页
      }
    } else { //如果进入的非login页
      if (isLogin == "true") {   //同样判断是否登陆
        next();  //已登录，正常进入
      } else {
        next({ name: 'login'});  //没登录，跳转到login页
      }
    }
  });
  export default router;