vue加token

最新推荐文章于 2024-07-25 17:24:25 发布

宝儿的程序生涯

最新推荐文章于 2024-07-25 17:24:25 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/fengtingyan/article/details/103410220

版权

本文讨论了在 Vue 应用中如何处理 Token 以便进行登录验证。主要内容包括：为何使用 Token，如何设置 Token 有效期，以及两种在 Vue 中实现登录状态管理和 Token 添加到请求头的方法——通过 vuex 和 axios 拦截器。同时，提到了在 .vue 文件中引入 store 的常见问题。

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

今天遇到一个问题：登录了还一直让我去登录
在这里插入图片描述
我才知道是需要给请求头加上token
王哥说
token 就是你登录的时候返回给你的数据
这个token 你需要登录后存起来
然后再开一个拦截器，每次访问请求的时候都把这个token 加到请求头里面去
不开拦截器的话你就要在代码中手动给你要发送的请求的请求头中加上token
然后我就去查如何 Vue 如何给请求带上请求头 | 如何带上token

可以在登陆的时候获取token，然后存起来，在拦截器里面判断是否有你的token，有就统一加上呗

每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token, 当后端接口返回 401 Unauthorized–未授权，让用户重新登录。

深入理解token

为什么用token？
Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化（比如存入数据库），那它就是一个永久的身份令牌。

需要为 Token 设置有效期吗？

token和localstorage的结合

axios.interceptors.request.use(function (config) {
   
  let userInfo = localStorage.getItem('userInfo')
  let token = ''
  if (userInfo != undefined && userInfo.length > 10) {
   
    userInfo = JSON.parse(userInfo)
    if (userInfo.token) {
   
      token = userInfo.token
    }
  }
  //
  // if (config.url.indexOf(url) === -1) {
   
  //   config.url = url + config.url /* 拼接完整请求路径 */
  // }
  // config.url = config.url.replace(/\/\//, '/')

  config.withCredentials = true
  config.headers = {
   
    'token': token
  }
  return config
}, function (error) {
   
  return Promise.reject(error)
})
axios.defaults.timeout = 30000 // 超时时间
axios.interceptors.respo