在vue中获取token,并将token写进header的方法


Posted in Javascript onSeptember 26, 2018

需要准备的东西: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 = "登录"
this.$message.error('账号或密码错误');
// 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) {
state.token = token
sessionStorage.token = token
},
del_token(state) {
state.token = ''
sessionStorage.removeItem('token')
}
}
})

3.在router/index.js中

// 页面刷新时,重新赋值token
if (sessionStorage.getItem('token')) {
store.commit('set_token', sessionStorage.getItem('token'))
}
 
const router = new Router({
mode: "history",
routes
});
 
router.beforeEach((to, from, next) => {
if (to.matched.some(r => r.meta.requireAuth)) {   //这里的requireAuth为路由中定义的 meta:{requireAuth:true},意思为:该路由添加该字段,表示进入该路由需要登陆的
if (store.state.token) {
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath}
})
}
}
else {
next();
}
})

4.在main.js中定义全局默认配置:

Axios.defaults.headers.common['Authentication-Token'] = store.state.token;

5.在src/main.js添加拦截器

// 添加请求拦截器
Axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
//判断是否存在token,如果存在将每个页面header都添加token
if(store.state.token){
config.headers.common['Authentication-Token']=store.state.token
}
 
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
 
// http response 拦截器
Axios.interceptors.response.use(
response => {
 
return response;
},
error => {
 
if (error.response) {
switch (error.response.status) {
case 401:
this.$store.commit('del_token');
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
})
}
}
return Promise.reject(error.response.data)
});

以上这篇在vue中获取token,并将token写进header的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript json2 使用方法
Mar 16 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 #Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 #Javascript
基于JavaScript实现一个简单的Vue
Sep 26 #Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 #Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 #Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 #Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
express启用https使用小记
2019/05/21 Javascript
js实现随机抽奖
2020/03/19 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
Saltstack快速入门简单汇总
2016/03/01 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Python中Selenium库使用教程详解
2020/07/23 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
python 如何实现遗传算法
2020/09/22 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
学生周末回家住宿长期请假条
2014/02/15 职场文书
小学校长汇报材料
2014/08/20 职场文书
入党申请书怎么写?
2019/06/21 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
MySQL 全文检索的使用示例
2021/06/07 MySQL
 Python 中 logging 模块使用详情
2022/03/03 Python