vue中 localStorage + sessionStorage实现浏览器关闭跳转登录，新建页签无需登录的功能

1、在app.vue中监听关闭浏览器 (刷新) 时清空localStorage确保关闭浏览器销毁token

    mounted: function () {
        window.addEventListener('unload', () => {
            // 这一步是在销毁之前存入session，确保刷新后token还在
            if (localStorage.getItem('admin-token')) {
                sessionStorage.setItem('admin-token', localStorage.getItem('admin-token'));
            }
            localStorage.setItem('admin-token', '');
        });
        
        // 同步sessionstorage localstorage
        this.timeOut = setInterval(() => {
            if (localStorage.getItem('admin-token')) {
                sessionStorage.setItem('admin-token', localStorage.getItem('admin-token'));
            }
            if (sessionStorage.getItem('admin-token')) {
                sessionStorage.setItem('admin-token', sessionStorage.getItem('admin-token'));
            }
        }, 100)
    },
    destroyed() {
        if (!this.timeOut) {
            clearInterval(this.timeOut);
            this.timeOut = null;
        }
    }

2、在路由渲染前进行token验证

    router.beforeEach((to, from, next) => {
        var localToken = localStorage.getItem("admin-token");
        var sessionToken = sessionStorage.getItem("admin-token");
        if (store.getters.token || localToken || sessionToken) {
            if (store.getters.roles && store.getters.roles.length > 0) {
                if (to.path === "/auth-login") {
                    next({ path: "/", replace: true });
                } else {
                    next();
                }
            } else {
                store
                    .dispatch("builtMenus")
                    .then(routes => {
                        store.dispatch("builtConfig").then(routes => {});
                        router.addRoutes(routes);
                        next({ path: to.fullPath, replace: true });
                    })
                    .catch(() => {
                        store.commit("SET_TOKEN", "");
                        next({ path: to.fullPath, replace: true });
                    });
            }
        } else {
            if (to.path === "/auth-login") {
                next();
            } else if (to.path === "/user-register") {
                next();
            } else {
                next({
                    path: "/auth-login",
                    query: {
                        redirect: to.fullPath
                    }
                });
            }
        }
    });

3、在store中赋值token

var GetTokenFromLocal= localStorage.getItem('admin-token');
var GetTokenFromSession = sessionStorage.getItem('admin-token');

const user = {
    state: {
        user: {},
        token: GetTokenFromLocal ? GetTokenFromLocal : GetTokenFromSession
    },
    getters: {
        roles: state => state.user.roles,
        permissions: state => state.user.permissions,
        token: state => state.token
    },
    mutations: {
        SET_USER(state, user) {
            state.user = user;
        },
        SET_TOKEN(state, token) {
            state.token = token;
            localStorage.setItem('admin-token', token);
            sessionStorage.setItem('admin-token', token);
        },
        USER_LOGIN(state, payload) {
            state.token = payload.token;
            localStorage.setItem('admin-token', payload.token);
            sessionStorage.setItem('admin-token', payload.token);
        },
        USER_LOGOUT(state) {
            state.user = {};
            state.token = null;
            localStorage.setItem('admin-token', "");
            sessionStorage.setItem('admin-token', "");
        },
        USER_UPDATE(state, user) {
            Object.assign(state.user, user);
        }
    }
};

export default user;