脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vuex存储token

vuex存储token示例

 更新时间：2019年11月11日 16:26:33   作者：zyx_  
今天小编就为大家分享一篇vuex存储token示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 浅谈Vue中的this.$store.state.xx.xx

    浅谈Vue中的this.$store.state.xx.xx

    这篇文章主要介绍了Vue中的this.$store.state.xx.xx用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2021-09-09
  • 解决VMware中vmware-vmx.exe进程无法关闭以及死机等问题

    解决VMware中vmware-vmx.exe进程无法关闭以及死机等问题

    这篇文章主要介绍了解决VMware中vmware-vmx.exe进程无法关闭以及死机等问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • vue如何监听浏览器主动刷新

    vue如何监听浏览器主动刷新

    这篇文章主要介绍了vue如何监听浏览器主动刷新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue实例创建和挂载的详细过程

    Vue实例创建和挂载的详细过程

    在 Vue.js 中,实例的挂载是一个非常重要的过程,它决定了 Vue 实例如何与 DOM 进行交互,通过分析 Vue 源码,特别是 Vue 的构建函数和生命周期,我们可以了解挂载过程的详细步骤,需要的朋友可以参考下
    2024-11-11
  • Vue中实现权限控制的方法示例

    Vue中实现权限控制的方法示例

    这篇文章主要介绍了Vue中实现权限控制的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Vue生产和开发环境如何切换及过滤器的使用

    Vue生产和开发环境如何切换及过滤器的使用

    本文主要介绍了Vue生产、开发环境如何切换及过滤器的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue+el-table实现合并单元格

    vue+el-table实现合并单元格

    这篇文章主要为大家详细介绍了vue+el-table实现合并单元格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue子组件获取到它父组件数据的4种方法

    vue子组件获取到它父组件数据的4种方法

    这篇文章主要给大家介绍了关于vue子组件获取到它父组件数据的4种方法,对于vue来说组件之间的消息传递是非常重要的,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue中get请求如何传递数组参数的方法示例

    vue中get请求如何传递数组参数的方法示例

    这篇文章主要介绍了vue中get请求如何传递数组参数的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue elementUI使用tabs与导航栏联动

    vue elementUI使用tabs与导航栏联动

    这篇文章主要为大家详细介绍了vue elementUI使用tabs与导航栏联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06

最新评论