vue中token的持久化

在 Vue 中，可以使用 localStorage 或者 sessionStorage 来存储 token，以实现 token 的持久化。具体实现可以在登录成功后将 token 存储在本地存储中，每次发送请求时从本地存储中获取 token 并添加到请求头中。这样可以保证用户在关闭浏览器后再次打开时仍然可以保持登录状态。

相关问题

vue3超购项目代码中token的处理

在 vue3 超购项目中，一般会将 token 存储在浏览器的本地存储（localStorage）中，以便在用户登录后能够持久化保存用户的登录状态，同时也方便后续向服务器发送请求时携带 token。

在代码中，可以通过以下方式获取 token：

// 从本地存储中获取 token
const token = localStorage.getItem('token');

如果需要向服务器发送请求，可以使用 axios 库，并在请求头中携带 token：

import axios from 'axios';

// 设置请求头
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

// 发送请求
axios.get('/api/some-resource').then(response => {
  // 处理响应
}).catch(error => {
  // 处理错误
});

需要注意的是，由于本地存储存储的是字符串类型的数据，因此需要在存储 token 时将其转换为字符串，而在获取 token 时需要将其转换为原始类型。同时也要注意存储的 token 的安全性，尽量避免将敏感信息存储在本地存储中。

如何在Vue 2中实现并保持用户登录状态的持久化存储？

在Vue 2中，实现用户登录状态的持久化存储通常涉及浏览器端的本地存储技术，如localStorage或者sessionStorage。以下是基本步骤：

1. **验证登录信息**：当用户成功登录后，在服务器返回有效的token（例如JWT）时，将该token存储在本地。

localStorage.setItem('accessToken', token);

2. **设置生命周期钩子**：在Vue组件中，可以利用`beforeCreate`, `created`, 或者`mounted`等生命周期钩子，在每次页面加载时检查是否有存储的token。

data() {
  return {
    user: null,
  };
},
created() {
  const token = localStorage.getItem('accessToken');
  if (token) {
    this.user = { accessToken: token };
  }
},
methods: {
  // 登录方法
  login(username, password) {
    // ...登录逻辑...
    if (success) {
      localStorage.setItem('accessToken', token);
    }
  },
}

3. **守卫（Guards）**：Vue Router的`router.beforeEach`或`axios.interceptors.response.use`等地方，可以检查是否有token并在无token时重定向到登录页。

4. **登出操作**：为了实现登出功能，可以在全局配置或某个需要清空登录状态的地方删除token。

logout() {
  localStorage.removeItem('accessToken');
  this.user = null;
}