vuex存储token示例
1.在login.vue中通过发送http请求获取token
//根据api接口获取token
varurl=this.HOST+"/session";
this.$axios.post(url,{
username:this.loginForm.username,
password:this.loginForm.pass
}).then(res=>{
//console.log(res.data);
this.$message.success('登录成功');
letdata=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状态进行监管
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.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'))
}
constrouter=newRouter({
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
}
returnconfig;
},error=>{
//对请求错误做些什么
returnPromise.reject(error);
});
//httpresponse拦截器
Axios.interceptors.response.use(
response=>{
returnresponse;
},
error=>{
if(error.response){
switch(error.response.status){
case401:
this.$store.commit('del_token');
router.replace({
path:'/login',
query:{redirect:router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
})
}
}
returnPromise.reject(error.response.data)
});
1.在login.vue中通过发送http请求获取token
//根据api接口获取token
varurl=this.HOST+"/session";
this.$axios.post(url,{
username:this.loginForm.username,
password:this.loginForm.pass
}).then(res=>{
//console.log(res.data);
this.$message.success('登录成功');
letdata=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状态进行监管
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.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'))
}
constrouter=newRouter({
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
}
returnconfig;
},error=>{
//对请求错误做些什么
returnPromise.reject(error);
});
//httpresponse拦截器
Axios.interceptors.response.use(
response=>{
returnresponse;
},
error=>{
if(error.response){
switch(error.response.status){
case401:
this.$store.commit('del_token');
router.replace({
path:'/login',
query:{redirect:router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
})
}
}
returnPromise.reject(error.response.data)
});
以上这篇vuex存储token示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。