Vue系列4 - Vue+store 保存用户登录信息和退出登录 | 8月更文挑战

这是我参与 8 月更文挑战的第 12 天，活动详情查看： 8月更文挑战

一、背景：

在写vue时，将用户信息保存在vuex中，但是F5刷新之后，用户信息没有了，需要重新登陆。每次都重新登陆会导致用户体验不好。

二、原理

vuex中的数据在页面刷新之后其中的数据会初始化，这就导致组件之间通过vuex传递的数据在用户F5刷新页面之后会丢失

三、解决办法 现在使用vuex和localStorage保存用户登录信息和退出登录，记录如下

四、步骤：

1.store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import qs from 'qs'
import example from './module-example'
import _ from 'lodash';

Vue.use(Vuex)
Vue.prototype.$qs = qs
/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */
export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    state: {
      user: {},
      token: "",
      title: ''
    },
    modules: {
      example
    },
    getters: {
      user(state){
        if (!_.size(state.user)) {
          var user = {};
          var u = JSON.parse(window.localStorage.getItem("user"));
          if (u) {
            user = u;
          }
          localStorage.setItem("user", JSON.stringify(user));
          state.user = user; //this.$store.commit("setUser", user);
          return user;
        }
        return state.user
      },
      token(state){
        return state.token
      }

    },
    mutations: {
      setUser (state, user) {
        var _user = _.merge({}, state.user);
        if (!_.size(_user)) {
          _user = {};
        }
        _.each(user, function (value, key) {
          _user[key] = value;
        })
        sessionStorage.setItem("user", JSON.stringify(_user));
        state.user = _user;
      },
      setToken (state, token) {
          sessionStorage.setItem("token", token);
          state.token = token;
      },
      LOGOUT (state){
        sessionStorage.clear();
        state.user = {};
        state.token = null
      },

    }
  })

  return Store
}

设置 store 里面的user 和token 属性，并给添加getter和setf方法，为其赋值

为了方便退出直接加了一个Logout的方法直接清空 所有对象

2.在login.vue 里登录成功返回user和token后将user和token保存至store中，如下使用commit方法

​

 当将登录对象保存至store后，用this.store.getters.token()来获取token对象，

或者  token = window.sessionStorage.getItem('token') 获取

3.退出

​

再需要退出的页面写一个退出登录的方法，调用store里面的logout方法，直接清空store中存储对象，再跳转至登录页面

更多精彩将定期更新，欢迎持续关注！