vue webpack项目中路由守卫的使用

在vue 的项目中我们在做路由跳转的时候一般都需要判断是否已经登录过了，如果登录过了就跳转到主页面，反之如果跳转没有成功那就跳转到登录页面。那么这个过程应该怎么做呢？

第一个需要修改的地方是main.js

//路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    // 判断该路由是否需要登录权限
    var token = Vue.ls.get(ACCESS_TOKEN, null);
    if (token) {
      //判断本地是否存在access_token
      next();
    } else {
      next({
        path: "/login"
      });
    }
  } else {
    next();
  }
  /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
  if (to.fullPath == "/login") {
    if (Vue.ls.get(ACCESS_TOKEN, null)) {
      next({
        path: from.fullPath
      });
    } else {
      next();
    }
  }
});

在项目中的示例

第二个需要改的地方是路由的那个js文件在这里插入图片描述

  meta: {
          requireAuth: true,
        },

在项目中的示例

写在最后
以上完整项目源码 来自我公众号（技术野生菌）中的项目，关注可获取