六、基于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
})
相关推荐
咕噜咕噜啦啦20 分钟前
Vue3响应式开发
前端·javascript·vue.js
huangql5202 小时前
布局单位与设计稿换算:从「看清」到「量准」
前端
牛奶2 小时前
你不知道的JS(下):深入编程
前端·javascript·电子书
牛奶2 小时前
你不知道的JS(下):深入JS(下)
前端·javascript·电子书
牛奶2 小时前
你不知道的JS(下):总结与未来
前端·javascript·电子书
牛奶2 小时前
你不知道的JS(下):深入JS(上)
前端·javascript·电子书
CappuccinoRose4 小时前
HTML语法学习文档(五)
前端·html·html5·表单
硅基动力AI5 小时前
如何判断一个关键词值不值得做?
java·前端·数据库
yq1982043011565 小时前
使用Django构建视频解析网站 从Naver视频下载器看Web开发全流程
前端·django·音视频
李明卫杭州6 小时前
在 JavaScript 中,生成器函数(Generator Function)
前端·javascript