react项目实现维持登录与自动登录

先回顾下之前所做的操作，在用户登录成功后将用户信息存储在内存里，如下所示

1、编写用户存储信息模块memoryUtils.js

　　

2、登录组件里，当登录成功时将信息存储到内存

　　

3、后台主页里进行登录验证

　　判断内存里是否包含user用户信息，如果没有则表示没有登录，重定向到登录页；否则正常访问

　　

　　但此时发现问题，即刷新页面时便会自动清除内存，所以接下来开始维持登录与自动登录，持久化存储信息，这里用到localStorage，简称local

4、首先我们用原生语法做个封装

　　

 

　　但原生写法有些兼容问题，我们可以结合第三方库使用

　　

 

　　然后去GitHub搜索store的语法文档

　　

 

5、首先安装依赖包

> yarn add store

6、引入使用

　　依次替代原生语法，如下所示

　　

 

　　优点：语法简洁、兼容性好

7、登录成功时做持久化存储操作

　　

 

　　接下来在入口文件index.js做存储操作，读取持久化存储的user，保存到内存里

　　

 

　　此时刷新页面或者关闭浏览器，再次打开localhost:3000时便会直接显示用户信息，因为此时已经做了持久化存储localStorage操作

　　

 

　　但是此时任然存在问题，即访问localhost:3000/login登录页面时仍然可以访问，理论上来讲，登录成功后（在退出登录前）不应该访问到登录页面（业务逻辑）

　　

8、登录页面做登录状态判断

　　

 

　　测试如下，此时登录状态下再次访问登录页

　　结果如右所示：

 

　　会自动帮我们重定向到后台首页。

　　如果删除本地存储，则可以正常访问到登录页，如下所示

　　

 

　　接着访问后台首页发现自动重定向到了登录页

　　

 

 

 

 

 

 

 

 

.