在vue中获取token，并将token写进header的⽅法
需要准备的东西：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.$storemit('set_token', data["Authentication-Token"]);
if (ken) {
this.$router.push('/')
console.log(ken)
} else {
this.$place('/login');
}
}).catch(error => {
// this.$(error.status)
this.loading = false
this.loginBtn = "登录"
this.$('账号或密码错误');
// console.log(error)
})
2.在store.js中对token状态进⾏监管
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
token:''
},
mutations:{
set_token(state, token) {
},
del_token(state) {react router 方法
}
}
})
3.在router/index.js中
// 页⾯刷新时，重新赋值token
if (Item('token')) {
storemit('set_token', Item('token'))
}
const router = new Router({
mode: "history",
routes
});
router.beforeEach((to, from, next) => {
if (to.matched.some(r => quireAuth)) {  //这⾥的requireAuth为路由中定义的 meta:{requireAuth:true}，意思为：该路由添加该字段，表⽰进⼊该路由需要登陆的if (ken) {
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath}
})
}
}
else {
next();
}
})
4.在main.js中定义全局默认配置：
Axios.defaults.headersmon['Authentication-Token'] = ken;
5.在src/main.js添加
// 添加请求
quest.use(config => {
// 在发送请求之前做些什么
//判断是否存在token，如果存在将每个页⾯header都添加token
if(ken){
config.headersmon['Authentication-Token']=ken
}
return config;
}, error => {
// 对请求错误做些什么
ject(error);
});
// http response
sponse.use(
response => {
return response;
},
error => {
if (sponse) {
switch (sponse.status) {
case 401:
this.$storemit('del_token');
path: '/login',
query: {redirect: router.currentRoute.fullPath}//登录成功后跳⼊浏览的当前页⾯
})
}
}
sponse.data)
});
以上这篇在vue中获取token，并将token写进header的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。