在vue中如何获取token，并将token写进header

最新推荐文章于 2024-08-16 17:33:03 发布

Sitarry

最新推荐文章于 2024-08-16 17:33:03 发布

阅读量7.2k

点赞数 3

文章标签： vue.js 前端框架前端 javascript

本文链接：https://blog.csdn.net/Sitarry/article/details/124363490

版权

这篇博客详细介绍了在Vue应用中如何获取token并将其设置到http请求的header中，涉及Vue、axios、Vuex和Vue-router的使用。首先在login.vue组件中通过http请求获取token，然后在store.js中管理token的状态，接着在router/index.js中进行相关配置，再在main.js中定义全局默认配置，最后在src/main.js添加axios拦截器，确保每个请求携带token。

摘要由CSDN通过智能技术生成

需要准备的东西Vue+axios+Vuex+Vue-router

1.在login.vue中通过发送http请求获取token

//根据api接口获取token
var url = this.HOST + "/session";
this.$axios.post(url, {
username: this.loginForm.username,
password: this.loginForm.pass
}).then(res => {
// console.log(res.data);
this.$message.success('登录成功');
let data = res.data;
//根据store中set_token方法将token保存至localStorage/sessionStorage中，data["Authentication-Token"]，获取token的value值
this.$store.commit('set_token', data["Authentication-Token"]);
 
if (store.state.token) {
this.$router.push('/')
console.log(store.state.token)
} else {
this.$router.replace('/login');
}
 
}).catch(error => {
// this.$message.error(error.status)
this.loading = false
this.loginBtn = "登录"
thi