Vue_router路由拦截-导航守卫&路由拦截后的判断是否已登录

最新推荐文章于 2025-06-02 09:03:06 发布

原创最新推荐文章于 2025-06-02 09:03:06 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了Vue中使用路由拦截实现权限控制的方法，通过全局前置守卫beforeEach对所有路由进行拦截，根据条件判断是否允许跳转或重定向至登录页，并在登录组件中处理登录后返回原页面的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由拦截

导航守卫

全局前置守卫

可以在路由跳转时对所有的路由进行拦截，拦截后根据条件对路由进行next() 或者next到其他路由操作

const router = new VueRouter()
router.beforeEach((to, from, next) => {
  // to表示要去的路由地址
  // from表示来自哪个路由地址
  // next可以进行路由跳转
})

路由拦截后的判断

const routes = [
  {
    path: '/',
    meta: {
      requiredAuth: true
    }
  }
]
const router = new VueRouter()
router.beforeEach((to, from, next) => {
  // 判断当前路由以及路由的父路由中是否包含meta，meta里是否有requiredAuth
  // to.matched中包含当前路由以及父路由
  // 如果判断出to.matched中某个路由里有meta.requiredAuth
  if (to.matched.some(route => route.meta.requiredAuth)) {
    // 判断是否已经登录
    if (已登录) {
      next()  
    } else {
      // 那就跳转到登录 并且添加query参数returnurl为to.path
      next({
        path: '/login',
        query: {
          returnurl: to.path // 从哪来回哪去
        }
      })
    }
  } else {
    next()
  }
})

登录组件的处理

<template>
  <div>

    <button @click="login">登录</button>
  </div>
</template>
<script>
export default {
  methods: {
    login () {
      // 调用结构
      login(user, password).then(res => {
        // 将结果中的验证信息存储到localStorage中

        // 成功则跳转到对应的来时的页面
        const url = this.$route.query.returnurl || '/'
        this.$router.push(url)
      })
    }
  }
}
</script>