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;
相关推荐
问心无愧05132 分钟前
ctf show web入门107
android·前端·笔记·android studio
2301_815645385 分钟前
react
前端·react.js
FirstFrost --sy8 分钟前
基于高并发服务器的web小游戏测试
服务器·前端·javascript·c++·python·集成测试
youyu-youyu10 分钟前
oss阿里云图片链接url高清图片设置为缩略图 vue 减少加载体积流量
前端·javascript·vue.js·阿里云·云计算
独隅17 分钟前
前端工程化在Chrome插件开发中的具体实践完全指南
前端·chrome
sbjdhjd19 分钟前
Tomcat(下) 集群高可用实战:反向代理・负载均衡・分布式 Session
运维·前端·云原生·开源·tomcat·负载均衡·memcached
低保和光头哪个先来26 分钟前
聊聊 CSS 编译和 scoped 实现
前端·css·vue.js
object not found27 分钟前
Node.js fs 常用 API 整理:node:fs/promises、node:fs、fs 到底怎么用
开发语言·前端·javascript
LiuJun2Son35 分钟前
Angular 快速入门:服务和依赖注入
前端·javascript·angular.js
kidding72335 分钟前
BMI 健康测量仪工具类小程序
前端·微信小程序·小程序