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;
相关推荐
何时梦醒几秒前
TypeScript 类型系统核心:type 与 interface 全方位深度对比(附实战案例)
前端·面试·typescript
渣波4 分钟前
TS 必考题深度解析:type 与 interface 的终极对决
前端·javascript
书源5 分钟前
AI 能写代码之后,前端工程师的价值在哪里?
前端·面试·程序员
恋猫de小郭14 分钟前
Flutter iOS Deep Link 为什么会突然失效:一系列难以言喻的问题
android·前端·flutter
Full Stack Developme24 分钟前
跨站脚本攻击 (XSS) 是什么 设计及工作原理
前端·xss
进击的蛋蛋28 分钟前
JS对象拷贝
前端
一心只读圣贤书31 分钟前
AI 辅助前端组件文档治理:从 Props 说明到交互示例生成
前端
晴殇i1 小时前
最近在 Github 名字叫“马尾辫”,这个真的很有趣看到头像
前端·后端·开源
10mAh1 小时前
【PaddleOCR】扫描版 PDF 无法复制、RAG 检索为空怎么解决?——OCR 解析与版面还原实战
前端·pdf·ocr
IMPYLH1 小时前
HTML 的 <embed> 元素
前端·数据库·html