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;
相关推荐
网络点点滴11 分钟前
Vue3中toRaw和MarkRaw
前端·javascript·vue.js
李松桃25 分钟前
01HTML-CSS-入门知识点
前端·css
广州华水科技25 分钟前
北斗GNSS变形监测系统是什么?主要有哪几种应用?
前端
晴天1630 分钟前
【跨桌面应用开发】Neutralinojs快速入门指南
前端·javascript·electron·node.js
爱学习的程序媛1 小时前
【Web前端】深入解析JavaScript异步编程
开发语言·前端·javascript·ecmascript·web
梧桐1681 小时前
马克沁机枪上阵(二):前线开辟—Claude Code 如何用一天打通前端
前端
是上好佳佳佳呀1 小时前
【前端(一)】HTML 知识梳理:从结构到常用标签
前端·html
楚轩努力变强1 小时前
2026 年前端进阶:端侧大模型 + WebGPU,从零打造高性能 AI 原生前端应用
前端·typescript·大模型·react·webgpu·ai原生·高性能前端
放下华子我只抽RuiKe51 小时前
深度学习 - 01 - NLP自然语言处理基础
前端·人工智能·深度学习·神经网络·自然语言处理·矩阵·easyui
AI服务老曹1 小时前
掌握核心代码:基于 Spring Boot + Vue 的 AI 视频管理平台源码架构与二次开发实战(全开源/低代码/私有化)
vue.js·人工智能·spring boot