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 相关文章推荐
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
vue框架中props的typescript用法详解
Feb 17 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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
php学习之简单计算器实现代码
2011/06/09 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
大学新生欢迎词
2014/01/10 职场文书
英文导游欢迎词
2014/01/11 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
委托公证书样本
2015/01/23 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
学习心理学心得体会
2016/01/22 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers