Vuex + localStorage 实现用户登录

localStorage

使用过 Vuex 的都知道, 存储在 Vuex 中的数据不能持久化, 刷新页面之后数据就会丢失, 这对于用户登录需要保存 session 之类的数据非常不方便, 总不能让用户离开一次就登录一次吧.....所以这里要用到 html5 的 localStorage 本地存储 API.

业务流程很简单, 登陆成功的时候写入 session 到 localStorage, 页面刷新了之后再从 localStorage 取出来.

先看存储:

在登录成功之后添加下面两行代码, 保存 session 和 user 到 localStorage中

window.localStorage.setItem('session', session)
window.localStorage.setItem('user', user)

当页面刷新之后,我们需要从 localStorage 中恢复数据到 Vuex, 在 App.vue 中实现 created 钩子:

import store from '@/store'

export default {

    new Vue({
        ...
        ...
        ...
        created: function(){
            var session = window.localStorage.getItem('session')
            this.$store.commit('session', session)
        }
    })
    
}

这样,即使重新加载网页, 登录信息依然存在, 除非用户手动点击了退出按钮