路由守卫拦截符合条件的路由，不放行

小杨爱编程

于 2024-04-04 16:39:36 发布

阅读量193

点赞数 2

分类专栏：实用技巧文章标签：前端 javascript

本文链接：https://blog.csdn.net/yajyaj123/article/details/137377271

版权

实用技巧专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中使用路由守卫，确保用户只能通过注册界面的按钮跳转到注册成功页面，防止直接输入/registerSuccess路由。通过设置全局前置守卫和元数据，实现了对特定路由的访问控制。

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

最近做毕设遇到一个问题，我有两个界面，一个是注册，一个是注册成功，对应的路由为/register和/registerSuccess，怎么实现只能通过注册界面的按钮才能跳转到注册成功界面，直接输入/registerSuccess路由会拦截,路由守卫怎么实现。

首先，确保你已经安装了Vue Router并在你的项目中进行了配置。然后，在你的路由配置文件（通常是router.js或index.js）中，添加一个全局前置守卫（Global Before Guard）：

 axios.post("http://localhost:8080/user/register", formData).then((res) => {
      if (res.data.code == 200) {
        //成功逻辑
        localStorage.setItem('fromRegister','true')
        router.push("/registerSuccess")
      }
      if (res.data.code == 400) {
        //失败逻辑
      }
    }).catch((e) => {
        //捕获异常
    })

import Login from '../view/login/Login.vue'
import Register from '../view/register/Register.vue'
import RegisterSuccess from '../view/register/RegisterSuccess.vue'


//route
  {path: '/login', component: Login, meta: {title: '欢迎登录'}},
  {path: '/register', component: Register, meta: {title: '欢迎注册'}},
  {path: '/registerSuccess', component: RegisterSuccess, meta: {title: '注册成功~', fromRegister: true}},

//路由守卫

router.beforeEach((to, from, next) => {
    //判断是否从register路由过来,如果是可以跳转
    if (to.matched.some(record => record.meta.fromRegister)) { // 检查目标路由是否需要验证
        // 在这里添加你的验证逻辑，例如检查是否已经注册
        // 如果验证通过，调用next()方法继续导航
        // 如果验证失败，可以重定向到其他页面或者显示错误信息
        if (localStorage.getItem('fromRegister')) {
            if (localStorage.getItem('fromRegister') == 'true') {
                next()
                localStorage.removeItem('fromRegister')
            }
        }
        next('/notFound') // 假设验证通过，允许导航
    } else {
        next() // 不需要验证，直接导航
    }
    //放行路由
    next()
})

在上面的代码中，我们为/registerSuccess路由添加了一个元数据requiresAuth，表示访问该路由需要进行验证。然后，我们定义了一个全局前置守卫，它会在每次导航之前执行。在守卫函数中，我们检查目标路由是否需要验证，如果需要验证，则执行相应的验证逻辑。在这个例子中，我们简单地假设验证通过，并允许导航。你可以根据你的实际需求修改验证逻辑。

这样，当用户尝试直接访问/registerSuccess路由时，由于没有通过验证，将会被拦截并阻止导航。只有通过注册界面的按钮跳转到注册成功界面时，才会通过验证并允许导航。