vue项目token放在哪里_在vue中获取token,并将token写进header的方法

本文介绍了在Vue项目中如何获取并管理token。首先,通过axios在login.vue组件中发送登录请求获取token,然后利用Vuex进行状态管理,将token保存在sessionStorage中。在router.js中检查token是否存在,若存在则将其设置为全局请求头。同时,添加axios的请求和响应拦截器以确保每次请求都携带token。最后,当收到401响应时,清除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.sta

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值