VUE3 使用路由守卫函数实现类型服务器端中间件效果

醉の虾2025-01-27 11:41

vue3中的router组件，有一个函数 router.beforeEach，可以实现请求中间件效果

使用方法如下：

前提已经在Vue3 项目中引入router组件，在router.js文件中加入router.beforeEach

javascript 复制代码

//路由守卫函数，类似于中间件session效果
router.beforeEach((to, from, next) => {
  //读取localStorage的存储值
  let token = localStorage.getItem('token');

//如果值存在，或者请求路径是登陆页面就直接通过，否则转到登录页
  if (to.path === '/login' || token) {
    next();
  }else {
    next('/login.html');
  }   

});

export default router;