记前端实现关闭页面有效期限内免登陆

记录一下，有这么一个需求，要求在关闭页面后30分钟内再使用应用可以免登陆，30分钟后再打开就需要跳转到登录进行验证。

由于刷新进入页面和关闭后进入页面对于程序来说太像了，我就是结合使用 vuex 在页面刷新会重置状态和给localstorage 设置有效期来完成。

首先，每次页面刷新，都会将我们应用中的vuex state重置，我就设置一个 flag 默认状态为false，当我登录到应用中后，将 flag 置为 true，那么每次刷新时，经过vue router 的前置守卫，我便通过判断 这个 flag 来决定是否要重新装载路由。当然为了避免产生类似于加载了重复路由的警告，我们可以定义一个路由重置方法，在每次装载路由时都重置一次，代码如下：

import VueRouter from 'vue-router'

//创建路由方法
const createRouter = () => new VueRouter({
    // mode: 'history',
    routes: ['你定义的静态路由']
})

//路由重置方法
export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // the relevant part
}

…………

接下来，我们在最外层的父组件加上对浏览器关闭事件的监听：

//app.vue 

mounted(){
    let vm = this;
    window.addEventListener( 'beforeunload',e =>{
         //在浏览器关闭之前在 localstorage 中存入一个 30分钟有效的 flag
         // 这里用的 vue-ls
         vm.$ls.set('need_login_flag',true, 30 * 60 * 1000);
    })
},

然后在 vue router  的 路由前置守卫中，加入判断：

router.beforeEach((to, from, next) => {
    //第一个判断用于判断是否为刷新或者新开页面
    //第二个判断控制 是否已关闭页面超过一定时间（localstorage 过期了）
    if(!state.flag && !Vue.ls.get('need_login_flag')){  
         //去登录页 
         next({ path: '/' });
    }
})