如何实现登录持久化

最近在写一个前后端分离系统,主要用到的技术栈是Vue(vuex,Vuerouter)+Nodejs(Koa具体模块此处省略),在前后端的登录功能基本实现后(主要包括数据交互,账号密码信息验证,数据库连接写入等等等等.............),突然发现!!!一个问题,在Vuerouter权限限制下,基本流程还算正常,但是登录限制的只有访问权限,如何让服务器知道该用户目前处于登陆状态....

经过短暂思考,初步思路:将账号信息保存到Cookie中,前端触发某些事件发送网络请求后,后端读取Cookie,如果账号存在,既该用户处于在线状态,but,先不谈把账号密码这么重要的信息保存在Cookie中是否合适,cookie保存缓存信息,在后端设置有效时间后,关闭浏览器并不能消除Cookie,并且每次发送网络请求在不考虑单独设置path的情况下,请求首部会默认携带上我们的cookie信息,所以,该方案可行。

emmmmmmmmmm.........既然如此,直接读取localStorage呢,localStorage同样是保存在客户端,不过这东西永久保存...在我这个需求下显然它不靠谱,所以pass。

session  这东西是保存在服务器的,占据了一小块内存,客户端访问后,查询对应的session信息,可以拿到一些比较私密的东西,好像我用不到他,而且占用了服务器内存,如果所有的账号信息我都保存到服务器里面,给服务器压力也挺大的,作为一个前端开发者,我对自己服务端的开发总有些心虚。

接下来是sessionStorage保存在客户端,并且关闭浏览器后则失效,woooooooooo~感觉有点靠谱了,同样暂时不考虑安全问题,把账号密码保存进去,服务器读取到sessionStorage里面数据后,则判定该账号在线,感觉...好像也没啥问题,可惜的是关闭浏览器后里面的数据信息就被销毁了,不能实现自动登录。

最后,该解决安全问题了,之前一直说暂时不考虑安全问题,可是可是可是,这么不加处理的把账号密码保存在客户端也太嚣张了吧,还是要想办法处理一下,前端把账号密码发送给后端时做一次加密,我用的md5,虽然现在md5挺容易破解的,但是也比不加密好点,凑凑合合吧,因为我的服务器是Koa,所以在后端收到加密信息后利用node的jsonwebtoken模块,生成一个对应的token返回给客户端,客户端把收到的token保存到cookie里,这样每次在发送网络请求后都会自动把cookie携带进去,服务端做一次简单的token验证!!!OK这个问题解决了!

收工!大吉大利,今晚吃鸡

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Vuex数据持久化的方法有很多种。一种常见的方法是使用插件,例如vue-persistedstate插件。这个插件可以将Vuex的数据存储在浏览器的本地存储中,确保数据在页面刷新后仍然可以保持不变。 使用vue-persistedstate插件非常简单。首先,你需要安装这个插件。你可以使用npm或者yarn来安装它。然后,在你的Vue项目的入口文件中,引入插件并将其添加到Vuex的配置对象中。 接下来,在Vuex的配置对象中,你可以指定需要持久化的数据。你可以选择性地指定需要持久化的模块或者指定整个Vuex存储。通过这样做,插件将会自动将这些数据存储在本地存储中,并在页面刷新后重新加载这些数据。 这样,每次用户刷新页面或者重新登录时,Vuex中的数据都会从本地存储中恢复,并保持之前的状态。这样就实现了Vuex的数据持久化。这种方法可以确保在用户重新加载页面后,数据仍然可以正常显示,而不会丢失。 总结起来,你可以使用vue-persistedstate插件来实现Vuex的数据持久化,确保数据在页面刷新后仍然可以保持不变。这样,即使用户重新加载页面或者重新登录,数据也能够被恢复并正常显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vuex实现数据状态持久化](https://download.csdn.net/download/weixin_38618746/12932266)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [基于vuex的数据持久化处理](https://blog.csdn.net/Laok0413/article/details/124260493)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值