在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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
javascript 强制刷新页面的实现代码
Dec 13 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
微信小程序音乐播放器开发
Nov 20 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
php模拟js函数unescape的函数代码
2012/10/20 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Nuxt.js踩坑总结分享
2018/01/18 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python类如何定义私有变量
2020/02/03 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
料理师求职信
2014/01/30 职场文书
仓管岗位职责范本
2014/02/08 职场文书
教职工代表大会主持词
2014/04/01 职场文书
股份转让协议书
2014/04/12 职场文书
公务员考察材料
2014/12/23 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
css弧边选项卡的项目实践
2023/05/07 HTML / CSS