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;
相关推荐
不可能片场几秒前
Electron 主进程热补丁:单行 JS 安全打法
前端·electron
梨想橙汁8 分钟前
Pinia 状态管理实战:定义 Store、修改数据、模块拆分
前端·vue.js
高申航13 分钟前
Vue 3 + DYMO Connect Framework 实战:从标签模板到打印服务的完整实现
前端·javascript·vue.js
梨想橙汁18 分钟前
Vue3 组件开发:生命周期钩子,组件之间通信全方案
前端·vue.js
雪芽蓝域zzs19 分钟前
分页组件 + el-config-provider 中文国际化 + 靠右布局
前端·javascript·vue.js
恋猫de小郭23 分钟前
iPhone Duo 适配详解,需要改变的不止是布局模型
前端·flutter·ios
萧行之34 分钟前
Observable Plot 源码深度解析——4 核心抽象逐项学习
前端·学习·数据可视化
今日无bug1 小时前
为什么大模型回答总是一个字一个字蹦出来?聊聊 SSE 流式输出与 BFF 层的那些事
前端·llm
志尊宝1 小时前
Vue3 零基础每日笔记(016):v-for 列表渲染——key 的作用与为什么不能用 index
javascript·vue.js·笔记
CIO_Alliance1 小时前
AI微调系列(1)| 全量微调、LoRA、QLoRA 三种方案怎么选
前端·人工智能·神经网络·机器学习·embedding·企业ai转型