六、基于Vue3的开发-【导航守卫】-登录访问拦截器

登录访问拦截器

1、参考文档

javascript 复制代码
	https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

2、具体配置(一般配置在router/index.js中)

javascript 复制代码
const router = createRouter({ ... })

//添加访问拦截器
// ---to: 即将要进入的目标 用一种标准化的方式
// ---from: 当前导航正要离开的路由 
router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

3、参考配置

javascript 复制代码
//-------------------一般配置在router/index.js中----------------------------------------------
//添加访问拦截器
// -----------to: 即将要进入的目标 用一种标准化的方式
// -----------from: 当前导航正要离开的路由 用一种标准化的方式
router.beforeEach((to) => {
  const userStore = useUserStore()
  //判断有没有token 并且不是登录页
  if (!userStore.token && to.path !== '/login') {
    return '/login'
  }
  // 其它情况就直接放行
  return true
})
相关推荐
路修远i1 分钟前
基于SSE的AI对话流式结构
前端·javascript
攀登的牵牛花22 分钟前
前端向架构突围系列 - 跨端技术 [11 - 1]:JSBridge 原理与 Hybrid设计
前端
用户57573033462442 分钟前
从 LocalStorage 待办清单到 CSS 核心机制:一次搞懂数据持久化、继承与盒模型陷阱
前端
codingWhat1 小时前
前端组件库开发实践:从零到发布
前端·npm·vite
cxxcode1 小时前
浏览器模块加载与 Webpack 打包原理
前端
兆子龙1 小时前
React Compiler 来了:少写 useMemo,照样稳
前端·架构
用户5433081441941 小时前
Manifest V3 实战:从补天网站逆向到 Chrome 扩展开发全记录
前端·后端
zhqiok1 小时前
React中类似于Vue中Pinia的轻量级状态管理神器——Zustand
前端
Mintopia1 小时前
促成高端技术方案形成的关键要素与实践路径
前端
摸鱼的春哥3 小时前
春哥的Agent通关秘籍13:实现RAG查询
前端·javascript·后端