路由拦截(接口携带token)验证_为啥响应拦截会把传过来的token拦截-优快云博客

本文链接：https://blog.youkuaiyun.com/M_Limeng/article/details/118938694

本文介绍了在Vue.js项目中如何实现路由权限拦截，确保只有登录后的用户才能访问除登录页以外的其他页面。通过在`router/index.js`中设置全局前置守卫，检查每个路由跳转前的token，结合`axios`的请求和响应拦截器，实现在登录成功后存储token，并在请求头中添加token，以及在接收到401错误时自动跳转回登录页。同时，登录过程发生在`Login.vue`组件中，登录成功后将token存储在localStorage并跳转到首页。

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

路由拦截 router/index.js

在管理系统项目中，页面一定是除登录页外其他页面都不能直接访问，都需要登录后才能方式

router.beforeEach((to, from, next) => {
  if (to.path !== '/login') {
    // 对token进行验证 （验证token的接口）
    验证token().then(() => {
      next()
    })
    
    // .catch不需要再写了，因为在axios的响应拦截器中已经进行了401的判断
    /* .catch(() => {
      next('/login')
    })  */

  } else {
    next()
  }
})

登录过程 Login.vue store/modules/users.js

登录时如果登录成功则把后台传递的数据中的token存储到localStorage中


<template>
  <button @click="login">登录</button>
</template>

<script>
  export defualt {
    methods: {
      login () {
        // ...
        // 登录成功
        localStorage.setItem('token', res.data.token)
        // 跳转页面到首页
        this.$router.push('/')
      }
    }
  }

</script>

所有的请求都添加token /utils/request.js

一般情况下，我们需要把token加在header中，一般名字叫authorization

这种操作需要利用axios的请求拦截器

axios.interceptors.request.use((config) => {
  // 一般请求拦截器只需要考虑第一个函数
  // 1 如果我们要给所有的请求中添加header
  // config.headers.key = "value"
  // 2 如果我们要给所有的请求添加query参数
  // config.params.key = "value"
  // 3 如果我们要给所有的请求添加body参数
  // config.data.key = "value"

  // 获取token
  const token = localStorage.getItem('token')
  if (token) {
    // 具体的authorization应该是什么需要看后台给的问题  需不需要添加Bearer也需要看文档
    config.headers.authorization = "Bearer " + token
  }
 
  return config
}, (err) => {

  return Promise.reject(err)
})

验证所有请求的响应结果，如果是401则跳转到登录 /utils/request.js

在axios的响应拦截器中，我们可以验证我们的状态码是否为401

axios.interceptors.response.use((res) => {
  return res
}, (err) => {
  // 验证是否有错误代码
  if (err.response.status === 401) {
    // 如果是401 
    // 删除本地存储的所有的用户信息
    localStorage.removeItem('token')
    // 跳转到登录
    router.push('/login')
  }

  Promise.reject(err)
})