vue 存储token

在Vue中存储token通常有两种方式：

1. 使用cookie存储token

可以使用js-cookie库将token存储在cookie中，具体代码如下：

import Cookies from 'js-cookie'

// 存储token
Cookies.set('token', token)

// 获取token
const token = Cookies.get('token')

// 删除token
Cookies.remove('token')

2. 使用localStorage存储token

可以使用localStorage将token存储在浏览器本地，具体代码如下：

// 存储token
localStorage.setItem('token', token)

// 获取token
const token = localStorage.getItem('token')

// 删除token
localStorage.removeItem('token')

需要注意的是，使用localStorage存储的token可能会被恶意程序获取，因此建议在存储时进行加密处理。

相关问题

vue存储token

### Vue 中存储 Token 的最佳实践

在 Web 应用程序中处理认证时，Token 是一种常见的机制。对于基于 Vue.js 的前端应用来说，有几种方法可以安全有效地管理这些 Tokens。

#### 使用 Local Storage 或 Session Storage 来保存 JWT (JSON Web Token)

Local Storage 和 Session Storage 提供了一种简单的方法来持久化数据直到浏览器关闭或是指定的时间范围。然而需要注意的是这两种方式并不是最安全的选择因为它们容易受到 XSS 攻击的影响[^1]。

为了提高安全性，在设置 Token 到 storage 前应该先对其进行加密处理；当读取并发送给服务器之前再解密。这可以通过引入第三方库如 `crypto-js` 实现加解密操作[^2]。

// 加密函数示例
import CryptoJS from 'crypto-js';

function encryptData(data, secretKey) {
    return CryptoJS.AES.encrypt(JSON.stringify(data), secretKey).toString();
}

// 解密函数示例
function decryptData(cipherText, secretKey) {
    const bytes = CryptoJS.AES.decrypt(cipherText, secretKey);
    try {
        return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
    } catch (e) {
        console.error('Decryption failed', e);
        throw new Error('Invalid or corrupted data');
    }
}

#### 将 Token 存储于 HTTP Only Cookies 中

更推荐的做法是利用 HttpOnly cookies 来保护敏感信息比如 authentication tokens 。这种方式能够有效防止跨站脚本攻击(XSS)，因为它不允许 JavaScript 访问 cookie 内容从而减少了被窃取的风险[^3]。

后端服务负责创建带有 Secure 属性标记以及 HttpOnly 标志位的 Cookie ，并将它随响应一起返回给客户端。之后每次请求 API 接口的时候都会自动附带此 Cookie 而无需额外编码逻辑去手动附加 Authorization Header 。

#### Vuex Store 配合 Pinia 插件用于状态管理

如果应用程序规模较大，则可能还需要考虑全局的状态管理模式。Vuex 可以为整个 app 维护集中式的 store 结构，并通过 actions/mutations 对象来进行异步/同步更新。随着官方推出的新一代解决方案——Pinia , 开发者现在有了更好的工具集可用于构建复杂的应用场景下的 state management system [^4].

综上所述，虽然可以直接把 token 放入 localStorage/sessionStorage 这样的 client-side storages 当中，但从长远来看还是建议采用更加健壮可靠的方案例如 http-only cookies 或者结合 vuex/pinia 构建完整的 auth flow 体系结构以确保系统的稳定性和安全性。

vue 封装token，请求拦截器存储token

在 Vue 中，可以使用 Axios 库进行网络请求，并使用拦截器对请求进行处理。下面是一个简单的实现示例：

1. 在 main.js 中引入 Axios 和创建一个 Axios 实例：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
})

Vue.prototype.$http = instance  // 将 Axios 实例挂载到 Vue 原型上

2. 在请求拦截器中存储 token：

instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token')  // 从 localStorage 中获取 token
  if (token) {
    config.headers.common['Authorization'] = `Bearer ${token}`  // 设置请求头中的 Authorization 字段
  }
  return config
}, error => {
  return Promise.reject(error)
})

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

localStorage.setItem('token', 'your_token_here')

通过以上步骤，我们就可以在每次请求中自动携带 token 了。需要注意的是，由于 token 存储在客户端，存在被恶意获取的风险，因此需要在后端进行严格的权限控制。