Vue设置router全局路由守卫and局部路由守卫

打开vue项目，找到src目录下router文件夹

进行router路由的配置

    // 路由配置页使用meta设置路由拦截
const routes = [
    {
        path: "/",
        name: "Home",
        redirect: "/index",
        meta:{isLogin:true},
        component: Home,
        children: [
              {
                path: "/index",
                name: "index",
                component: () => import("../views/pages/index.vue"),
              },
              {
                path: "/list",
                name: "list",
                component: () => import("../views/pages/list.vue"),
              },
              {
                path: "/car",
                name: "car",
                component: () => import("../views/pages/car.vue"),
              },
              {
                path: "/my",
                name: "my",
                component: () => import("../views/pages/my.vue"),
              },
        ],
    }
]

设置路由守卫

    // 加载之前 执行条件判断 当前路由下isLogin是否存在
    router.beforeEach((to,form,next)=>{
      if(to.matched.some(v=>v.meta.isLogin)){
        // 存在值则拦截路由 👆
        // 执行判断存储信息 根据boolean值 绕过拦截 👇
        if(sessionStorage.getItem('token')){
          next()
        }else{
          next('/login')
        }
      }else{
        next()
      }
    })
    
    // 另一种白名单方式
    
    let whiteRouter = ["/login"];
    router.beforeEach((to, form, next) => {
      if (whiteRouter.includes(to.path)) {
        next();
      } else {
        if (sessionStorage.getItem("vuex")) {
          next();
        } else {
          next("/login");
        }
      }
    });