1:在Login.vue中通过http申请获取到token和用户信息
//依据api接口获取tokenthis.$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']) }) .catch((error) => { // this.$message.error(error.status) this.loading = false // 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: 在touter/index.js 中