vue router 全局路由守卫

在router/index.js里面进行操作

代码如下：

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { //配置home页面
      path: "/",
      name: "home",
      meta:{isLogin:true},//当前路由是否需要拦截
      component: HomeView,
    },
    { //配置about页面
      path: "/about",
      name: "about",
      meta:{isLogin:true},
      component: () => import("../views/AboutView.vue"),
    },
    { //配置login页面
      path: "/login",
      name: "login",
      component: () => import("../views/login.vue"),
    },
    { //配置error(404)页面
      path: "/error",
      name: "error",
      meta:{isLogin:true},
      component: () => import("../views/error.vue"),
    },

  ],
});

// 路由全局守卫/拦截
router.beforeEach((to, from, next) => {
  if (to.matched.length) { //判断当前路由是否配置
    if (to.matched.some(v=>{return v.meta.isLogin == true})) { //判断当前有meta属性的路由包括他的子路由是否需要拦截
      if (sessionStorage.getItem('token')) { //判断是用户否登录
        next() //若已登录继续下一个路由
      } else {
        next('login') //若未录则会跳转到login页面
      }
    } else {
      next() //若不需要拦截继续下一个路由
    }
  } else {
    next('error') // 若未配置跳转到error页面
  }
})
export default router;

此代码是vue3格式，vue2全局守卫同vue3一样只不过创建vue文件后router里面的index.js文件里面引入vue的格式不同