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 中


_Junjun
28 声望6 粉丝