使用axios处理Cookie、Session和Token(jwt)_axios 携带jwt token

在Vue中，可以使用JavaScript来处理Cookie、Session和Token。我们还是以登录为例介绍它们的使用

Cookie：

在Vue中，可以使用JavaScript内置的document.cookie来读取和设置Cookie。在登录过程中，可以将用户的身份信息存储在Cookie中，并在后续请求中读取该Cookie来验证用户身份。

// 登录请求处理
axios.post('/login', { username, password })
  .then(response => {
    // 登录成功，将用户身份信息存储在Cookie中
    document.cookie = `username=${response.data.username}; expires=1h`;  // 设置Cookie的过期时间为1小时
    // 跳转到首页或其他需要登录的页面
  })
  .catch(error => {
    // 登录失败处理
  });
 
// 需要验证用户身份的请求
axios.get('/profile', {
  headers: {
    Cookie: document.cookie  // 在请求头中发送Cookie
  }
})
  .then(response => {
    // 处理用户身份
  })
  .catch(error => {
    // 用户未登录或身份验证失败处理
  });

Session

在Vue中，可以使用浏览器提供的sessionStorage或localStorage来存储和获取Session数据。在登录过程中，可以将用户的身份信息存储在Session中，并在后续请求中从Session中获取用户信息进行验证。

// 登录请求处理
axios.post('/login', { username, password })
  .then(response => {
    // 登录成功，将用户身份信息存储在Session中
    sessionStorage.setItem('username', response.data.username);
    // 跳转到首页或其他需要登录的页面
  })
  .catch(error => {
    // 登录失败处理
  });
 
// 需要验证用户身份的请求
axios.get('/profile', {
  headers: {
    Authorization: sessionStorage.getItem('username')  // 在请求头中发送Session数据
  }
})
  .then(response => {
    // 处理用户身份
  })
  .catch(error => {
    // 用户未登录或身份验证失败处理
  });

Token

在Vue中，可以将Token存储在内存中，并在每个请求的请求头中添加Token进行身份验证。

// 登录请求处理
axios.post('/login', { username, password })
  .then(response => {
    // 登录成功，将Token存储在内存中
    const token = response.data.token;
    // 跳转到首页或其他需要登录的页面
  })
  .catch(error => {
    // 登录失败处理
  });
 
// 需要验证用户身份的请求
axios.get('/profile', {
  headers: {
    Authorization: `Bearer ${token}`  // 在请求头中发送Token
  }
})
  .then(response => {
    // 处理用户身份
  })
  .catch(error => {
    // 用户未登录或身份验证失败处理
  });

以上是在Vue中发送acios请求使用Cookie、Session和Token的示例，其中Cookie和Session可以通过JavaScript的API进行操作，而Token则可以存储在内存中并在请求头中传递。根据具体的需求和情况，你可以选择适合的方式来管理用户的身份验证和状态信息。