react 使用localStorage存储用户登陆状态

最新推荐文章于 2025-03-16 18:22:17 发布

de_la_prada

最新推荐文章于 2025-03-16 18:22:17 发布

阅读量4k

点赞数

分类专栏：前端文章标签： javascript css reactjs html

本文链接：https://blog.youkuaiyun.com/weixin_41973410/article/details/106874687

版权

前端专栏收录该内容

16 篇文章

订阅专栏

这篇博客探讨了如何在React应用中使用localStorage来存储用户登录状态，并通过React Router的Redirect组件实现在用户登录后的页面跳转。当用户首次登录后，登录信息会被转化为JSON字符串存入localStorage。在后续访问时，应用会检查localStorage中的用户信息，已登录用户将直接被重定向到首页，而未登录用户访问首页会被引导至登录页。这样确保了登录鉴权的有效实施。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文启发自https://www.youtube.com/watch?v=Y4NHqDp88lA

网站的登陆功能可以涉及到各种鉴权相关的知识，比如：

用户尚未登陆前无法访问网站内的其他页面
用户登陆之后访问登陆页会跳转到首页（因为已经执行了登陆操作了，按道理用户不应该还能够访问登陆页面）

这些功能的实现可以借助localStorage和react-router-dom的Redirect方法实现。

首次登录后将用户登录信息存储到localStorage中

需要注意localStorage不能直接存储对象，需要使用JSON.stringify处理后才能存储到localStorage中，不然localStorage中获取到的只是[object, object]：

localStorage.setItem('userData', JSON.stringify(res.data.detail));

下次进入登录页后先判断用户是否已经登录过，如果是则直接跳转到home页（站点内的页面）。

使用Redirect来实现跳转功能

import { withRouter, Redirect } from 'react-router-dom'

constructor中先将redirect设置为false：

this.state = {
    redirect: false,
};

在componentWillMount()阶段判断localStorage中是否已经存在用户信息（存在则说明已经登录过了）:

componentWillMount() {
        if (localStorage.getItem("userData")) {
            console.log("已经登陆过了");
            this.setState({ redirect: true });
        }
    }

在render()中添加跳转代码，立即跳转到指定路由：

if (this.state.redirect) {
    return <Redirect to={'/person'} />;
}

这样就实现了登录页的鉴权。

home页的鉴权：

如果localStorage中没有用户信息，说明用户没有登录过，需要立即跳转到登录页进行登录（这个只需要在home页的最父的父组件去判断即可，不用在子组件中去进行判断）