在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 相关文章推荐
jQuery源码分析之Event事件分析
Jun 07 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
基于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
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
js实现一键复制功能
2017/03/16 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
电气工程和自动化自荐信范文
2013/12/25 职场文书
《秋游》教学反思
2014/04/24 职场文书
销售顾问工作计划书
2014/08/15 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
喋血孤城观后感
2015/06/08 职场文书
经营场所证明范本
2015/06/19 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
CSS基础详解
2021/10/16 HTML / CSS
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏