=============
前端_用户登录
=============

将用户输入的用户名和密码提交给后端，并从得到的响应中提取令牌和用户信息，分别保存在本地和会话存储中。

1 存储令牌和用户信息

/src/store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: '',
    user: JSON.parse(sessionStorage.getItem("user"))
  },
  mutations: {
    // set方法
    SET_TOKEN: (state, token) => {
      state.token = token
      localStorage.setItem("token", token)
    },
    SET_USER: (state, user) => {
      state.user = user
      sessionStorage.setItem("user", JSON.stringify(user))
    },
    REMOVE_ALL: (state) => {
      state.token = ''
      state.user = {}
      localStorage.setItem("token", '')
      sessionStorage.setItem("user", JSON.stringify(''))
    }

  },
  getters: {
    // get方法
    getUser: state => {
      return state.user
    }

  },
  actions: {
  },
  modules: {
  }
})

2 提交登录请求并处理响应

/src/views/Login.vue：

...
submitForm(formName) {
  this.$refs[formName].validate(valid => {
    if (valid) {
      const _this = this
      this.$axios.post('http://localhost:8081/login',
        this.ruleForm).then(response => {
          console.log(response.headers) // 响应头(含令牌)
          const token = response.headers['authorization']
          console.log(response.data) // 响应体(Result)
          const user = response.data.data

          // 把数据共享出去
          _this.$store.commit("SET_TOKEN", token)
          _this.$store.commit("SET_USER", user)
          // 获取
          console.log(_this.$store.getters.getUser)

          _this.$router.push("/list")
        })
    }
    else {
      console.log('error submit!');
      return false;
    }
  });
},
...

3 运行测试

浏览器
    控制台：响应头、响应体、存储中的用户
    应用程序
        本地存储：令牌
        会话存储：用户