vue 实现简单的登录/退出

1.首先通过axios获取用户信息，并在vuex中存储用户的基本信息和token

login.vue页

onLogin() {
  this.$refs.ruleForm.validate(e => {
    if (!e) {
      return;
    }
    this.axios
      .post("/admin/login", {
        username: this.ruleForm.username,
        password: this.ruleForm.password
      })
      .then(res => {
        let { data } = res.data;
        //存储用户信息(vuex+本地存储)
        this.$store.commit("login", data);
        //路由跳转
        this.$router.push({ name: "index" });
        // 成功提示
        this.$message({
          message: "登陆成功",
          type: "success"
        });
      })
  });
}

vuex中 store--index.js页

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: {},
    token: false
  },
  mutations: {
    //登陆
    login(state, userInfo) {
      // 修改vuex
      state.user = userInfo;
      state.token = userInfo.token;
    },
    //退出
    logout() {
      // 修改vuex
      state.user = {};
      state.token = false;
    }
  }
})

2.为了保证刷新后依然能记录用户信息，可以使用localStorage在本地存储用户信息；

⚠️注意：state中的user和token默认先在localStorage查找赋值，本地没有值时才初始化值为空； 否则可能出现问题：如登陆成功跳转到首页，页面右上角显示用户名，当点击刷新后，用户名不显示问题

user: JSON.parse(localStorage.getItem('user')) || {},
token: localStorage.getItem('token') || false

完善后store--index.js页

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: JSON.parse(localStorage.getItem('user')) || {},
    token: localStorage.getItem('token') || false
  },
  mutations: {
    //登陆
    login(state, userInfo) {
      // 修改vuex
      state.user = userInfo;
      state.token = userInfo.token;
      // 本地存储
      localStorage.setItem('user', JSON.stringify(userInfo));
      localStorage.setItem('token', JSON.stringify(userInfo.token))
    },
    //退出
    logout() {
      // 修改vuex
      state.user = {};
      state.token = false;
      // 本地存储
      localStorage.clear()
    }
  },
})