最近在后台项目遇到一个跟localStorage的问题，特此记录下采坑的过程。

localStorage失效问题

业务描述：用户登录主账号后，用户的信息会被存在浏览器的localStroage中，这样的好处是即使关闭浏览器，用户下次也不需要主动登录，除非用户主动登出或者localStroage被手动清空。

问题描述: 用户登录主账号后，切换子账号的过程中，此时新开了一个tab页面，localStroage莫名其妙被清空了，由于我司的项目只需考虑现代浏览器即可，按理说使用localStroage完全没问题，但不知为何，它就被莫名清空，运营的小伙伴反馈使用的是360浏览器，现象偶发，没办法，测试了几款浏览器包括360浏览器，未能复现。

我司后台项目使用的是vue框架，结合项目探讨下登录的过程

登录

登录后，登录信息存入localStorage中, 刷新页面过程会再次检查localStorage中是否有用户信息，没有则跳转到登录页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default {
    state: {
        // localStroage获取信息
        user: storage.get(USER)
    },
    mutations: {
        [SET_USER] (state, data) {
            state.user = data
        }
    },
    ...
    actions: {
        login ({commit}, data) {
            storage.set(USER, data)
            commit(SET_USER, data)
        }
    }
}

路由中限制

切换路由中，校验是否满足路由跳转的条件

1
2
3
4
5
6
7
8
9
10
export default {
    ...
    {
        path: '/',
        component: Base,
        beforeEnter: login,
        children: children
    }
    ...
}

校验登录的条件, 用户信息不存在的情况下，再次请求用户信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export function login(to, from, next) {
    if (!store.getters.user) {
        let nextParams = {path: '/login'}
        let redirect = to.fullPath
        if (redirect !== '/') {
            nextParams.query = {redirect: to.fullPath}
        }
        // localStorage 用户信息不存在，再次请求用户数据
        var url = ''
        Vue.http.get(url).then(res => {
            res = res.body
            if (res.error === 0 && res.data) {
                // 更新消息
                store.dispatch('login', res.data)
                next()
            } else {
                next(nextParams)
            }
        }, () => {
            next(nextParams)
        })
    } else {
        next()
    }
}