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;
相关推荐
幼儿园技术家18 分钟前
嵌套 H5 的跨端通信:iOS / Android / 小程序 / 浏览器
前端·js or ts
一只小阿乐29 分钟前
TypeScript中的React开发
前端·javascript·typescript·react
用户97141718142733 分钟前
vite项目开发环境启动白屏
前端
Highcharts.js33 分钟前
Highcharts客户端导出使用文档说明|图表导出模块讲解
前端·javascript·pdf·highcharts·图表导出
上山打牛37 分钟前
cornerstone3D 通过二进制渲染影像
前端
一只小阿乐42 分钟前
react路由中使用context
前端·javascript·react.js·context 上下文
Hilaku42 分钟前
一周狂揽40K+ Star⭐ 的 Pretext 到底有多变态?
前端·javascript·html
533_43 分钟前
适用于vue3的拖拽插件:vue-draggable-plus, vuedraggable@next
javascript·vue.js
Southern Wind1 小时前
AI Skill Server 动态技能中台
前端·后端·mysql·node.js
锦木烁光1 小时前
多端项目太乱?我是这样用 Monorepo 重构的
前端·架构