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;
相关推荐
ZC跨境爬虫12 小时前
跟着 MDN 学CSS day_50:(传统布局方法与网格系统)
前端·css·ui·tensorflow·媒体
薛先生_09912 小时前
vue-路由模块封装
前端·javascript·vue.js
薛先生_09912 小时前
vue-router-link实现导航高亮效果
前端·javascript·vue.js
郑州光合科技余经理12 小时前
海外版外卖系统源码:支付/地图/多语言核心代码实现
android·java·前端·后端·架构·uni-app·php
古韵13 小时前
TanStack Query 被高估了?这 5 个场景它真不如 alova
前端
颂love13 小时前
Vue3基础入门
前端·学习·vue3
风吹夏回13 小时前
Vue 3 路由使用完全指南
前端·vue.js
创业之路&下一个五年13 小时前
JS编程范式 \& 面向对象范式
开发语言·前端·javascript
whatever who cares13 小时前
完整的Vue3项目文件结构
vue.js
ct97813 小时前
Axios 请求取消
前端·javascript·vue.js