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.com mmon['Authentication-tooken]=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の例は、小編集が皆さんに提供した内容の全部です。参考にしていただければと思います。よろしくお願いします。