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;
相关推荐
IT_陈寒2 分钟前
Java的HashMap竟然不是线程安全的,现在才知道!
前端·人工智能·后端
IT_陈寒2 分钟前
React hooks闭包陷阱让我加了一宿班
前端·人工智能·后端
不一样的少年_3 分钟前
设计稿里的图片明明很清晰,为什么到了手机上却糊了?一文讲透 DPR、压缩与格式选择
前端·后端·图片资源
计算机魔术师4 分钟前
OpenAI内部数据曝光:AI已经替人类写了3.1倍的研究代码
前端
心易行者7 分钟前
用html在线运行做数据可视化大屏,5个实战场景从入门到上线
大数据·前端·数据库·人工智能·python
光影少年7 分钟前
从输入URL到页面渲染,React/RN 整体加载流程
前端·javascript·react native·react.js·前端框架
兔子零10249 分钟前
我给 Pi Coding Agent 做了一个桌面控制台:Pi-Harness
前端·javascript·后端
Kevin Coding10 分钟前
鸿蒙 emitter/EventHub 没有 Sticky 粘性事件?手写一个轻量级 EmitterManager 解决
前端·华为·前端框架·移动开发·harmonyos
Rescenix14 分钟前
agent前台被批量举报的复盘:频率特征 + uv venv shim 幻影导致的进程双开误判
前端·人工智能
谷无姜15 分钟前
QuizForge:在不停踩坑后的技术决策复盘
前端·nestjs