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 相关文章推荐
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
js实现搜索栏效果
2018/11/16 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
Python字符串内置函数功能与用法总结
2019/04/16 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python3 反射的四种基本方法解析
2019/08/26 Python
pytorch的batch normalize使用详解
2020/01/15 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
应届大学生求职信
2013/12/01 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
3分钟演讲稿
2014/04/30 职场文书
校园文化标语
2014/06/18 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL