vue中登录验证成功后保存token,并每次请求携带并验证token操作

在Vue中，登录验证成功后，可以将token保存在本地存储中，例如使用localStorage.setItem('token', token)。每次请求时，可以在请求头中携带token，例如使用axios.defaults.headers.common['Authorization'] = 'Bearer ' + token。后端接收到请求后，可以验证token的有效性，例如使用jsonwebtoken库进行验证。如果token无效，则返回401 Unauthorized错误。如果token有效，则继续处理请求。

相关问题

Vue中登录成功保存token，并每次请求携带并验证token

在 Vue 中保存 token 可以使用浏览器的 localStorage 或者 sessionStorage。localStorage 存储在本地并且不会过期，sessionStorage 存储在浏览器关闭后会自动删除。

以下是一个示例代码：

// 登录成功后保存 token
localStorage.setItem('token', 'your_token');

// 在发送请求时携带 token
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 在服务端验证 token
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response && error.response.status === 401) {
      // 清除 token 并跳转到登录页面
      localStorage.removeItem('token');
      router.replace({
        path: '/login',
        query: { redirect: router.currentRoute.fullPath }
      });
    }
    return Promise.reject(error);
  }
);

在发送请求时，通过 axios 拦截器在请求头中添加 token，服务端可以从请求头中获取 token 进行验证。如果服务端返回 401 错误码，说明 token 无效或者过期，此时前端应该清除 token 并跳转到登录页面。

vue中"localstorage 存储 token", 并且设置请求拦截器，每次请求携带此 token

好的，这里是一个在Vue中实现"localstorage 存储 token"和设置请求拦截器的示例代码：

1. 在登录成功后将token存储到localStorage中：

// 登录成功后将token存储到localStorage中
localStorage.setItem('token', token);

2. 在请求拦截器中获取localStorage中的token，并将其添加到请求头中：

import axios from 'axios';

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 从localStorage中获取token
    const token = localStorage.getItem('token');
    // 如果token存在，则将其添加到请求头中
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

在这个示例中，我们使用axios库来发送HTTP请求，并通过请求拦截器来设置每个请求的请求头，以便携带localStorage中存储的token。需要注意的是，这里的token是作为Bearer token的形式添加到请求头中的，这是一种常见的认证方式。