【VUE】路由守卫

login.vue

//其他逻辑页面代码省略
//登录成功本地存储登录名称，在退出时请清空
localStorage.setItem('name', '1111');
//登录成功后跳转
this.$router.replace({ name: index}});

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

const index             = resolve => require(['@/pages/index.vue'], resolve);
const login             = resolve => require(['@/pages/login.vue'], resolve);

Vue.use(VueRouter);

/**
 * @method 路由配置
 */
const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/',
      name: 'index',
      component: login,
      meta: {
        login_auth: true
      }
    },
    {
        path: '/login',
        name: 'login',
        component: login,
        meta: {
          login_auth: false
        }
    }
    // ...
  ]
});

/**
 * @method 全局前置守卫
 * @param {参数类型} 参数名 参数说明
 *  {
 *      to: 将要跳转到的路由,
 *      from: 将要离开的路由,
 *      next: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed (确认的)
 *  }
 */
router.beforeEach((to, from, next) => {
  // 判断该路由是否需要登录权限
  if (to.meta.login_auth) {
    // 根据是否注册用户名，判断是否登录，未登录太转到登录页面
    if(!localStorage.getItem('name')){
      if(to.name != 'login') {
        next('/login');
      }else{
        //必须调用 next 方法，否则钩子就不会被 resolved；因为next('/login')就是路由跳转，会再次触发路由守卫所以或造成死循环。
        next();
      }

      return;
    }
  }
  //必须调用 next 方法，否则钩子就不会被 resolved
  next();
})；

export default router;

需要注意

1、next() 会直接进入to路由，不会再调用router.beforeEach();
2、next('/login')当前导航中断， 跳转到login，会再次调用router.beforeEach()，所以必须调用next()路由守卫进入确认状态,否则会造成死循环.