vue如何存储token
时间: 2023-07-27 12:10:28 浏览: 86
在 Vue 中存储 Token 通常有两种方式:
1. 使用浏览器的本地存储,比如 localStorage 或 sessionStorage。可以在登录成功后将 Token 存储在本地存储中,退出登录时删除。
```javascript
// 存储 Token
localStorage.setItem('token', token);
// 获取 Token
const token = localStorage.getItem('token');
// 删除 Token
localStorage.removeItem('token');
```
2. 使用 Vuex 管理全局状态。可以在 Vuex 中定义一个 state 来存储 Token,然后在需要使用 Token 的组件中通过 getters 获取。
```javascript
// 定义 state
const state = {
token: ''
};
// 存储 Token
mutations: {
setToken(state, token) {
state.token = token;
}
};
// 获取 Token
getters: {
getToken: state => state.token
};
```
使用 Vuex 存储 Token 可以方便地在应用程序的任何地方获取和更新,但相比本地存储需要额外的代码来实现。
相关问题
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,请求拦截器存储token
在 Vue 中,可以使用 Axios 库进行网络请求,并使用拦截器对请求进行处理。下面是一个简单的实现示例:
1. 在 main.js 中引入 Axios 和创建一个 Axios 实例:
```js
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://api.example.com',
timeout: 5000
})
Vue.prototype.$http = instance // 将 Axios 实例挂载到 Vue 原型上
```
2. 在请求拦截器中存储 token:
```js
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 中:
```js
localStorage.setItem('token', 'your_token_here')
```
通过以上步骤,我们就可以在每次请求中自动携带 token 了。需要注意的是,由于 token 存储在客户端,存在被恶意获取的风险,因此需要在后端进行严格的权限控制。
阅读全文