关于vue.js:如何在vuex中对token进行存储

51次阅读

共计 762 个字符，预计需要花费 2 分钟才能阅读完成。

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 中

正文完