vuex存储token示例


Posted in Javascript onNovember 11, 2019

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) 
});

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) 
});

以上这篇vuex存储token示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
Vuex实现数据增加和删除功能
Nov 11 #Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 #Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 #Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 #Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 #Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 #Javascript
vue与django集成打包的实现方法
Nov 11 #Javascript
You might like
使用PHPMailer发送邮件实例
2017/02/15 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
php swoft框架实例用法
2020/12/22 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python 自动化表单提交实例代码
2017/06/08 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
营销团队口号
2014/06/06 职场文书
语文教研活动总结
2014/07/02 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
初中作文评语
2014/12/25 职场文书