vue 导航守卫

最新推荐文章于 2024-12-10 01:40:00 发布

Dking222

最新推荐文章于 2024-12-10 01:40:00 发布

阅读量232

点赞数

分类专栏： vue基础知识文章标签： vue

本文链接：https://blog.csdn.net/weixin_47686269/article/details/109675398

版权

vue基础知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的全局前置守卫，用于实现路由访问的权限控制。通过`router.beforeEach`函数，判断用户访问的路径是否在授权列表中。如果在，则检查本地存储的token，存在则放行，否则重定向至登录页。对于无需授权的路径，直接放行。该机制确保了只有经过授权的用户才能访问特定页面。

摘要由CSDN通过智能技术生成

vue 导航守卫 在这里插入图片描述
from：从哪来
to：到哪里去
next是一个函数决定是否放行，next（）放行，next（’/login’）拦截到login
配置全局前置守卫，在router文件中进行配置
所有的路由在被真正访问之前，都会经过全局前置守卫放行了，你才能访问到对应的路由
consle.log(to)
注意fullPath和path的区别

/ 全局前置守卫: 所有的路由在被真正访问之前, 都会先经过全局前置守卫
// 只有全局前置守卫放行了, 才能真正的访问到你需要访问的路由
// to 到哪去
// from 从哪来
// next 是一个函数, 决定了是否放行, next()放行, next('/login')拦截到登录
// 将来的页面两种情况:
// 1. 需要授权才能访问  个人中心页, 我的收藏, 我的关注 ...
// 2. 不需要授权, 可以直接访问的  首页 登录页 注册页
// 这个数组中, 专门存放所有需要授权的路径
const AuthUrls = ['/profile']

router.beforeEach((to, from, next) => {
  // 需要授权的 和 不需要授权访问的处理是不一样的
  // 1. 如果要去的路径, 在授权数组中, 说明需要授权才能访问
  // console.log(to.path)  // /profile
  if (AuthUrls.includes(to.path)) {
    // 2. 需要授权访问的路径, 判断有没有token令牌
    //    有token放行, 没有token, 拦截到登录
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    // 不需要授权访问的路径, 放行
    next()
  }
})