vue.js

所用技术：前端：Vue（2.x）、Vuex、Vue-Router、Nginx、node.js后端：jsp

其实我也不想纠结这个问题，但是业务逼着我纠结这个问题！（或许很多人甚至不认为这是一个问题！你们觉得呢？）也可能因为我就是一个纠结的人，但是我希望项目体验最好~~~

下面我列出了三种方案：

1.方案一：cookie（不设置过期时间）

个人不太喜欢这种方案，因为很多时候，我打开一个站点，登陆，复制url，然后关闭浏览器，粘贴url，还是能够访问的（不需要重新登陆），说明这些站点并未采用这种存储方式。欢迎补充你们的想法~~~

2.方案二：cookie（设置过期时间）

优点：过期浏览器自动删除缺点：需要人为维护过期时间缺点解决方案：如果用户在一定时间未使用系统（未交互），我们可以理解为，一定时间内用户没有向服务器发送请求，我们可以在axios拦截里面修改cookie的过期时间。

3.方案三：localStorage

重点是第三种方案，这也是项目目前采用的方式，但是因为业务导致我纠结了。

项目相关背景：

本地存储方式：localStorage数据访问：axios，采用拦截器方式，如果api返回的代码为未登录，元素js跳转至登陆页面

业务需求：

用户登录成功（localStorage存储登录信息）——》判断是否设置支付密码（localStorage存储是否设置支付密码）——》如果已设置，跳转到主页；未设置，跳转到设置页。

成功跳转至主页（包含很多子页——子路由），基本每个子路由页面都会在进入后调用一些查询api，api拦截器里面返回如果未登录，再跳转至未登录。

需求就是这么简单，但是问题来了——有两种情况下显得问题比较“严重”

1、假设登录成功——》查询到未设置支付密码——》然后关闭浏览器，三天过后输入登录地址，因为localStorage未清空（也不能想cookie一样过期），所以会跳转到设置支付密码页面，因为这个页面不需要调用查询api，所以不会跳转至登录页，这个时候用户会输入“支付密码”，点击提交，然后会提示“用户未登录”，这样体验就不好了——用户的操作被浪费了……

2、三天过后，首页（包含登陆按钮）——》点击登陆，会自动跳到“设置支付密码”页面（注意，不是登录页哦），因为是已登录状态，用户设置支付密码保存——》又跳转到“登陆页”，这种情况太严重了，已客户的角度简直不可理解！

于是，我想到了cookie+设置过期时间的方式来处理，但是也有一些比较麻烦的事情；

那么，对于这种需求该如何进行本地存储才是最佳方案呢？