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;
相关推荐
万少14 小时前
万少用9个AI工具,帮朋友完成了一个"不可能"的项目
前端
小小小小宇14 小时前
Vue `import` 为什么可以异步加载
前端
WMYeah14 小时前
【无标题】
前端·rust·抽奖程序·跨平台抽奖程序
Unbelievabletobe14 小时前
免费外汇api的响应时间在不同时段下的波动分析
大数据·开发语言·前端·python
大哥,带带弟弟15 小时前
Grafana 前端嵌入与 JWT 鉴权实战
前端·grafana
小小小小宇15 小时前
前端 V8 引擎垃圾回收机制与内存问题排查
前端
前端老石人15 小时前
CSS 值定义语法
前端·css
sheeta199815 小时前
Vue 前端基础笔记
前端·vue.js·笔记
小小小小宇15 小时前
GitLab + GitLab Runner + Qiankun 微前端 + Nginx + Node 中间件 前端开发机从零搭建 CI/CD 全流程
前端
前端那点事15 小时前
别再写垃圾组件!Vue3 如何设计「真正可复用」的高质量通用组件
前端·vue.js