vuex存儲token示例
更新時間：2019年11月11日 16:26:33 作者：zyx_
今天小編就為大家分享一篇vuex存儲token示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1.在login.vue中通過發(fā)送http請求獲取token
//根據(jù)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;
//根據(jù)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狀態(tài)進行監(jiān)管
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 => {
// 在發(fā)送請求之前做些什么
//判斷是否存在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}//登錄成功后跳入瀏覽的當(dāng)前頁面
})
}
}
return Promise.reject(error.response.data)
});
1.在login.vue中通過發(fā)送http請求獲取token
//根據(jù)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;
//根據(jù)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狀態(tài)進行監(jiān)管
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 => {
// 在發(fā)送請求之前做些什么
//判斷是否存在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}//登錄成功后跳入瀏覽的當(dāng)前頁面
})
}
}
return Promise.reject(error.response.data)
});
以上這篇vuex存儲token示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例
這篇文章主要為大家介紹了Fragment 占位組件不生成標(biāo)簽與路由組件lazyLoad案例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
vue+導(dǎo)航錨點聯(lián)動-滾動監(jiān)聽和點擊平滑滾動跳轉(zhuǎn)實例
今天小編就為大家分享一篇vue+導(dǎo)航錨點聯(lián)動-滾動監(jiān)聽和點擊平滑滾動跳轉(zhuǎn)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue+elementUI中表格高亮或字體顏色改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
實用的 vue tags 創(chuàng)建緩存導(dǎo)航的過程實現(xiàn)
這篇文章主要介紹了實用的 vue tags 創(chuàng)建緩存導(dǎo)航的過程實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗
VuePress為每一個由它生成的頁面提供預(yù)加載的html，不僅加載速度極佳，同時對seo非常友好。這篇文章主要介紹了基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細介紹了vue.js 2.0實現(xiàn)簡單分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
本篇文章主要介紹了詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了Vue.use()的用法和install的用法解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了淺談vue路徑優(yōu)化之resolve，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10