怎么将服务器返回的token存储到本地缓存中

在前端中，可以使用浏览器提供的 `localStorage` 或者 `sessionStorage` 来存储 token。这两个 API 都是浏览器提供的本地存储方式，可以将数据保存在浏览器中，即使用户关闭浏览器，数据也不会丢失。

其中，`localStorage` 用于长期存储数据，而 `sessionStorage` 用于临时存储数据，只在当前会话有效。下面是一个将服务器返回的 token 存储到 `localStorage` 中的示例代码：

// 假设服务器返回的 token 存储在变量 token 中
localStorage.setItem('token', token);

这样，当用户再次访问网站时，可以通过 `localStorage.getItem('token')` 来获取之前存储的 token，从而实现自动登录等功能。需要注意的是，存储在本地的 token 应该进行加密处理，以保证安全性。

相关问题

token要存到缓存中？放到redis缓存不也相当于放在内存中存取吗？这样和session有什么区别？

是的，将 token 存储到 Redis 缓存中也相当于将其存储在内存中。与使用 session 存储 token 相比，使用 Redis 缓存存储 token 的好处在于：

1. 分布式支持：多台服务器共享同一个 Redis 缓存，可以实现分布式应用中的数据共享。

2. 扩展性：Redis 可以通过主从复制和集群模式来扩展读写能力，以应对高并发场景。

3. 性能：Redis 的性能要比传统的 session 存储方式更高效，因为 Redis 是基于内存的，而且支持异步方式存储数据。

另外，使用 Redis 缓存还可以避免 session 因为过期时间不一致等问题导致的登录状态不一致等问题。但是需要注意的是，使用 Redis 缓存存储 token 时需要考虑安全性，因为 token 存储在 Redis 中是明文存储的，需要采取一些措施进行加密或者轮换等保护措施。

Vuex 缓存token

在 Vuex 中缓存 token，你可以使用 Vuex 的 state 来存储 token，并使用 Vuex 的 mutation 来更新 token。当用户登录成功时，将 token 存储在 state 中，然后在每个请求中将 token 添加到请求头中，以便服务器验证身份。

以下是一个简单的示例：

// 定义 state，用来存储 token
const state = {
  token: ''
}

// 定义 mutations，用来更新 state 中的 token
const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
  }
}

// 定义 actions，用来触发 mutations 更新 token
const actions = {
  setToken({ commit }, token) {
    commit('SET_TOKEN', token)
  }
}

// 在组件中使用
<template>
  <div>
    <button @click="login">登录</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['setToken']),
    login() {
      // 发送登录请求，并获取 token
      const token = 'token'
      // 将 token 存储在 state 中
      this.setToken(token)
    }
  }
}
</script>

在每个请求中添加 token 的方法，可以在 Axios 中使用拦截器来实现：

import axios from 'axios'

axios.interceptors.request.use(
  config => {
    // 在请求头中添加 token
    const token = store.state.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

以上示例仅为简单示例，实际使用中可能需要根据具体情况进行调整。