在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 运算数的求值顺序
Aug 23 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
JS实现评价的星星功能
Aug 20 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
PHP insert语法详解
2008/06/07 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
PHP中16个高危函数整理
2019/09/19 PHP
js href的用法
2010/05/13 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
js简易版购物车功能
2017/06/17 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python any()函数的使用方法
2019/10/28 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
环保建议书600字
2014/05/14 职场文书
四年级学生期末评语
2014/12/26 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
《1942》观后感
2015/06/08 职场文书
公司酒会致辞
2015/07/30 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS