vue 如何使用token

在Vue.js中使用token有几个关键步骤：1、获取token，2、存储token，3、在请求中使用token，4、自动处理token过期。这些步骤确保了你的Vue应用在与API进行交互时能够安全且有效地使用token进行身份验证和授权。

一、获取token

首先，你需要从身份验证服务获取token。通常，这是通过用户登录表单提交后，从服务器获取的。以下是一个示例，展示了如何通过登录表单获取token：

methods: {
  async login() {
    try {
      const response = await axios.post('https://api.example.com/auth/login', {
        username: this.username,
        password: this.password
      });
      const token = response.data.token;
      this.saveToken(token);
    } catch (error) {
      console.error('Login failed:', error);
    }
  }
}

在这个示例中，我们使用axios向身份验证API发送POST请求，并从响应中获取token。

二、存储token

获取token后，你需要将其存储起来，以便后续请求中使用。通常，我们将token存储在浏览器的localStorage或sessionStorage中：

methods: {
  saveToken(token) {
    localStorage.setItem('authToken', token);
  }
}

此方法将token存储在localStorage中，这样即使用户刷新页面，token也不会丢失。

三、在请求中使用token

为了在每个请求中使用token，你需要在请求头中添加Authorization字段。可以使用axios的请求拦截器来实现这一点：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

这个拦截器会在每个请求发送之前检查localStorage中的token，并将其添加到请求头中。

四、自动处理token过期

token通常有一个有效期，当token过期时，你需要重新获取一个新的token。可以通过响应拦截器来处理401未授权错误，并尝试刷新token：

axios.interceptors.response.use(response => {
  return response;
}, async error => {
  if (error.response.status === 401) {
    // 尝试刷新token
    try {
      const refreshToken = localStorage.getItem('refreshToken');
      const response = await axios.post('https://api.example.com/auth/refresh', { token: refreshToken });
      const newToken = response.data.token;
      localStorage.setItem('authToken', newToken);
      // 重新发送原始请求
      error.config.headers.Authorization = `Bearer ${newToken}`;
      return axios(error.config);
    } catch (refreshError) {
      console.error('Token refresh failed:', refreshError);
      // 处理刷新失败的情况，例如重定向到登录页面
      // router.push('/login');
    }
  }
  return Promise.reject(error);
});

这个响应拦截器会在收到401错误时，尝试使用刷新token来获取一个新的token，并重新发送原始请求。

总结与建议

综上所述，Vue.js中使用token的步骤包括获取token、存储token、在请求中使用token以及自动处理token过期。通过这些步骤，你可以确保你的Vue应用安全地与API进行交互。建议在实际应用中，结合具体的业务需求和安全策略，进一步优化token的管理和使用。同时，定期审查和更新安全策略，以应对不断变化的安全威胁。