vue 用什么存储token • Worktile社区

fiy

Worktile&PingCode市场小伙伴

在Vue中，可以使用浏览器的本地存储（LocalStorage或SessionStorage）来存储Token。本地存储可以将数据保存在浏览器中，供后续使用。LocalStorage和SessionStorage类似，但存储的数据有所不同。

如果您的Token需要在用户关闭浏览器后也能保持有效，可以使用LocalStorage。LocalStorage中存储的数据不会过期，除非用户手动清除或您的代码显式删除。您可以使用如下代码将Token存储到LocalStorage中：

// 存储Token到LocalStorage
localStorage.setItem('token', 'your-token-value');

如果您的Token只需要在用户当前会话中有效，可以使用SessionStorage。SessionStorage中的数据只在浏览器窗口或标签页关闭后被删除。您可以使用如下代码将Token存储到SessionStorage中：

// 存储Token到SessionStorage
sessionStorage.setItem('token', 'your-token-value');

在需要发送请求时，您可以从本地存储中获取Token，并将其添加到请求的头部或参数中。以下是一个例子：

// 从LocalStorage中获取Token
const token = localStorage.getItem('token');

// 在请求的头部中添加Token
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

以上是一种将Token存储在本地存储中的方法。但需要注意的是，由于存储在本地的Token可以被恶意的脚本访问和修改，因此在存储Token时，应该遵循一些安全性的措施，例如加密或使用HTTPS等。另外，根据具体情况，您也可以考虑将Token存储在Cookie中或使用其他安全性更高的存储方式。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue可以使用多种方法来存储token。

使用浏览器的本地存储（LocalStorage或SessionStorage）：可以将token存储在浏览器的本地存储中。这样，在用户关闭浏览器之后，token仍然会保留在本地，直到用户手动清除浏览器缓存。
使用Cookie：使用Cookie存储token是另一种常见的方法。可以将token作为Cookie的一个键值对存储在客户端，并设置有效期。当用户发送请求时，可以在请求头中包含Cookie来携带token。
使用VueX：VueX是Vue的官方状态管理库，可以在其中存储和管理token。可以将token存储在VueX的state中，然后在需要的地方调用和使用它。
使用插件：Vue有许多插件可用于处理认证和存储token。例如，vue-auth插件可以帮助您在应用程序中实现身份验证，并提供存储和管理token的功能。
使用第三方库：除了Vue自带的工具和插件之外，还可以使用第三方库来存储token。例如，axios是一个常用的HTTP库，可以使用其中的拦截器功能来在请求中自动添加token。

无论选择哪种方法，都需要根据具体的需求和项目来决定最合适的存储方式。在存储token的同时，还需要考虑安全性和用户体验。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，可以使用多种方式存储Token。下面将介绍一些常用的存储方式。

使用浏览器的localStorage或sessionStorage：
- localStorage和sessionStorage是浏览器提供的Web存储机制，可以在浏览器端将数据存储在本地。
- 使用localStorage存储Token的方法：
```
// 存储Token
localStorage.setItem('token', token);

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

// 删除Token
localStorage.removeItem('token');
```
- 使用sessionStorage存储Token的方法与localStorage类似，只需将localStorage换成sessionStorage即可。
- 需要注意的是，localStorage和sessionStorage存储的数据是永久性的（除非手动删除），因此一般需要在登出时手动删除Token。

使用Vue的状态管理工具Vuex：

Vuex是Vue官方提供的状态管理工具，可以用于在Vue组件之间共享数据。

在Vuex的store中创建一个全局状态token，然后在登录成功后将Token存储到该全局状态中，需要使用Token时可以直接从状态中获取。

// 创建Vuex store
const store = new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    }
  },
  actions: {
    login({ commit }, token) {
      commit('setToken', token);
    }
  }
});

// 存储Token
store.dispatch('login', token);

// 获取Token
const token = store.state.token;

// 删除Token
store.commit('setToken', '');

在需要使用Token的组件中，可以通过this.$store.state.token来获取Token。

使用cookie：

cookie是存储在用户计算机中的一个小文件，可以在浏览器和服务器之间传递数据。

在登录成功后，可以使用JavaScript将Token存储为一个cookie，然后在发送请求的时候将Token一起发送给服务器。

// 存储Token
document.cookie = `token=${token}`;

// 获取Token
function getCookie(name) {
  const value = '; ' + document.cookie;
  const parts = value.split('; ' + name + '=');

  if (parts.length === 2) {
    return parts.pop().split(';').shift();
  }
  
  return '';
}

const token = getCookie('token');

// 删除Token
document.cookie = `token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;

需要注意的是，使用cookie存储Token时需要设置正确的过期时间，以保证Token在过期后自动删除。

无论使用哪种方式存储Token，都需要注意保护好用户的安全性，避免Token的泄露和滥用。

1年前 0条评论