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

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;
相关推荐
Eason_Lou4 分钟前
【无标题】
前端·vue.js·html
_codemonster25 分钟前
npm run dev 是在开发模式运行,怎么在生产环境运行
前端·npm·node.js
kyriewen1 小时前
我受够了复制报错去问 AI,花一下午给控制台做了个调试助手
前端·javascript·ai编程
IT_陈寒2 小时前
Redis的DEL命令竟然没删掉数据?我踩的这个坑你得知道
前端·人工智能·后端
anOnion2 小时前
构建无障碍组件之Menu and Menubar Pattern
前端·html·交互设计
JavaGuide2 小时前
我用 Claude Code/ZCode+GLM-5.3 从零做了一款 Agent 游戏!
前端·后端
Eason_Lou2 小时前
vue flow使用注意事项
前端·vue.js
小赵同学WoW3 小时前
1-2 TypeScript 中的 `any` 与 `unknown`
前端
six_3 小时前
C# 上位机(持续更新中)
前端·面试·c#
风雨_3 小时前
Git Worktree sourcetree完整使用指南
前端