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;
相关推荐
SuperEugene几秒前
Vue3 配置驱动表格:列配置/操作配置/分页配置,统一表格渲染|配置驱动开发实战篇
前端·javascript·vue.js·驱动开发·架构
weixin_471383031 分钟前
[特殊字符] React Flow 从入门到理解
开发语言·前端·javascript
三翼鸟数字化技术团队4 分钟前
前端水印实现方案
前端
IT_陈寒10 分钟前
SpringBoot自动配置的坑把我埋了半小时
前端·人工智能·后端
专注VB编程开发20年12 分钟前
VBA/VB6连接、读取Mdb access数据库最快的方法
前端·ui·ado·vb6
CodeCxil24 分钟前
基于Vue的在线Online Word文档编辑器
vue.js·编辑器·word
W.A委员会25 分钟前
大数据渲染
前端
五仁火烧26 分钟前
前端不传文件,也能用 multipart/form-data
前端·javascript·vue.js·node.js
五仁火烧30 分钟前
前端最常用的两种请求数据格式application/json 和 multipart/form-data 完全解析
前端·javascript·vue.js·json
Bigger30 分钟前
第七章:我是如何剖析 Claude Code 的性能优化与部署策略的
前端·claude·源码阅读