1:在Login.vue中通过http请求获取到token和用户信息
//根据api接口获取token
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'])
})
.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 中
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。