提问人：Ata Forte 提问时间：11/14/2023 更新时间：11/14/2023 访问量：32
代币 vue js， jwt
Token vue js, jwt
问：
我想问一下，如何使用 localstorage 中的令牌成为可用于所有功能的令牌。这个令牌来自 localstorage，这个令牌之前来自 auth。 我希望使用 LocalStorage 中的令牌访问所有功能别名令牌 localStorage 是全局令牌。 这是我的登录表单代码：
async handleSubmit () {
// const self = this
console.log('on handleSubmit()')
this.$refs.loginForm.validate(async (valid) => {
if (this.loginLoading) return
this.loginLoading = true
try {
if (valid) {
const { userName, password } = this.form
const res1 = await this.handleLogin({ userName, password })
const res2 = await this.getUserInfo()
console.log('>>> handleSubmit:33', { res1, res2 })
console.log('>>> confighomename', this.$config.homeName)
const tokenstring = JSON.stringify(res1.access_token)
localStorage.setItem('token', tokenstring)
this.$emit('on-login-success', {
username: this.form.userName,
password: this.form.password
})
这个句柄登录代码：
async handleLogin ({ commit }, { userName, password }) {
try {
userName = userName.trim()
const res = await RestClient.request({
url: '/api/auth/login', method: 'POST', data: { username: userName, password }
})
const data = res.data
commit('setTagNavList', [])
commit('setToken', data.id)
commit('setData', data)
return data
} catch (error) {
console.error('>>> Error in handleLogin API: ', error)
throw error
}
那么我在哪里可以使用来自 localstorage 的令牌到每个功能？
来自 localstorage 的令牌取代了授权，可以在每个地方使用
答：
0赞
Ali Bahrami
11/14/2023
#1
要将存储在 localStorage 中的 JWT 令牌用作 Vue.js 应用程序中的全局令牌，首先您应该将令牌存储在某个位置（localStorage 或 cookie），然后通过拦截器将其附加到您的请求中。 因此，通常在登录后，您应该：
localStorage.setItem('token', JSON.stringify(res1.access_token));
然后（假设使用 Axios）：
function getToken() {
return JSON.parse(localStorage.getItem('token'));
}
axios.interceptors.request.use(config => {
const token = getToken();
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
大多数情况下，您的令牌保留在本地存储中，并且您在拦截器中处理适当的逻辑。
评论
0赞
Ata Forte
11/14/2023
我在哪里使用该代码？在我的句柄中提交 ？
评论