Next.js + Redux 实现登录授权的本地存储和 cookie 管理

在现代 web 应用中，用户的身份认证和授权非常重要。在前端领域中，通常使用 token 和 cookie 进行用户的身份认证和授权。在本文中，我们将使用 Next.js 和 Redux 实现登录授权的本地存储和 cookie 管理。

使用 Next.js 创建应用

Next.js 是一个 React 框架，可以轻松创建服务器渲染的 web 应用。我们可以使用 create-next-app 命令创建新的 Next.js 应用。执行以下命令：

--- --------------- ------

然后进入 my-app 目录，并使用以下命令启动应用：

--- --- ---

这些命令将创建一个基本的 Next.js 应用，并启动开发服务器。

实现登录和授权

使用 Redux 管理应用状态，可以轻松实现登录和授权。Redux 是一个可预测的状态容器，可以在应用程序中存储应用程序的状态，并使用 actions 和 reducers 更新和查询该状态。

实现 Redux store

首先，我们需要实现 Redux store。在 Next.js 应用中，我们可以使用 configureStore 函数创建 Redux store。在 store.js 文件中添加以下代码：

------ - -------------- - ---- ------------------
------ ----------- ---- -------------

------ ----- ----- - ----------------
  -------- -
    ----- ------------
  --
--

我们使用 configureStore 函数创建 Redux store，并将 authReducer 添加到 reducer 中。

实现登录和授权功能

接下来，我们将实现登录和授权功能。在 authSlice.js 文件中添加以下代码：

------ - ----------- - ---- ------------------

------ ----- --------- - -------------
  ----- -------
  ------------- -
    ---------------- ------
    ----- -----
  --
  --------- -
    -------- ------- ------- -- -
      --------------------- - ----
      ---------- - --------------
    --
    ---------- ----- -- -
      --------------------- - -----
      ---------- - ----
    --
  --
--

------ ----- - -------- --------- - - -----------------

------ ------- -----------------

在 authSlice.js 文件中，我们创建了一个名为 auth 的 slice，并导出了两个 action：setUser 和 clearUser。setUser 将用户设置为已认证状态，并将用户信息存储在状态中。clearUser 将用户设置为未认证状态，清除存储的用户信息。

我们还将 authSlice reducer 导出为默认导出。

实现登录页面

接下来，我们将实现登录页面。在 pages/login.js 文件中添加以下代码：

------ - -------- - ---- -------
------ - ----------- - ---- -------------
------ - --------- - ---- -------------
------ - ------- - ---- -------------------

------ ------- -------- ----------- -
  ----- ---------- ------------ - ------------
  ----- ---------- ------------ - ------------
  ----- -------- - -------------
  ----- ------ - -----------

  ----- ------------ - ----- - -- -
    ------------------
    -- --------- --- --- -------------
    ----- ---- - ----- ----------- --------- -------- --
    -----------------------
    ----------------
  -

  ------ -
    ----- ------------------------
      ------ ----------- ---------------- ----------- -- ---------------------------- --
      ------ --------------- ---------------- ----------- -- ---------------------------- --
      ------- ----------------------------
    -------
  -
-

在 Login 页面中，我们使用 useState 钩子来处理表单数据。然后我们使用 useDispatch 钩子来调度 setUser action 并将用户登录信息存储到 Redux store 中。我们还使用 useRouter 钩子来推进用户到主页。

实现授权组件

最后，我们将实现授权组件，用于确定用户是否已登录。在 components/requireAuth.js 文件中添加以下代码：

------ - ----------- - ---- -------------
------ - --------- - ---- -------------

------ ------- -------- ------------- -------- -- -
  ----- --------------- - ----------------- -- ---------------------------
  ----- ------ - -----------

  -- ------------------ -
    ---------------------
    ------ ---------------- -- --------------
  -

  ------ --------
-

在 RequireAuth 组件中，我们使用 useSelector 钩子从 Redux store 中选择 isAuthenticated 状态。如果用户没有被认证，则重定向到登录页面。否则，该组件显示传递给它的 children。

本地存储和 cookie 管理

在上一步中，我们实现了登录和授权的基本功能。但是在客户端下一次访问应用程序时，应该如何告诉服务器用户已经被认证过了呢？这就需要用到本地存储和 cookie 管理。

实现本地存储

我们使用浏览器的本地存储来存储用户的登录信息。在 store.js 文件中添加以下代码：

------ ----- --------- - ----- -- -
  --- -
    ----- --------------- - ---------------------
    ----------------------------- ----------------
  - ----- ----- -
    ----------------
  -
-

------ ----- --------- - -- -- -
  --- -
    ----- --------------- - -----------------------------
    -- ---------------- --- ----- -
      ------ ---------
    -
    ------ ---------------------------
  - ----- ----- -
    ------ ---------
  -
-

------------------ -- -
  -----------
    ----- ---------------------
  --
--

我们添加了两个函数：saveState 和 loadState。saveState 在每次状态变化时将状态存储到本地存储中。loadState 从本地存储中加载状态。

实现 cookie 管理

我们使用 cookie 技术来存储用户的登录信息。在客户端发出请求时，它会将 cookie 发送到服务器。在服务器上，它可以将 cookie 与会话（如果会话存在）相关联。

我们将使用 js-cookie 库来管理 cookie。我们可以使用 setCookie 函数将 cookie 存储到客户端，使用 getCookie 函数从客户端获取 cookie。

在 utils/cookie.js 文件中添加以下代码：

------ ------- ---- -----------

------ ----- --------- - ------ ------ ------- - --- -- -
  ----------------- ------ --------
-

------ ----- --------- - ------ ------- - --- -- -
  ------ ----------------- --------
-

------ ------- -
  ----------
  ----------
-

实现服务端 cookie 管理

为了在服务器端管理 cookie，我们需要使用 cookie-parser 中间件解析 cookie。在 pages/api/login.js 文件中添加以下代码：

------ - --------- - ---- ----------------
------ ------------ ---- ---------------

------ ----- ------ - -
  ---- -
    ----------- ------
  --
-

------ ------- ----- ----- ---- -- -
  ----- - --------- -------- - - --------

  -- ------------ ----
  ----- ---- - ----- -------------------------- ---------

  -- ------ -
    -- --- ---- ------
    ----------------- --------------------- - --------- ---- --

    -------------- - ---
    --------------
  - ---- -
    -------------- - ---
    ---------- -------- ---------- -------- -- --------- --
  -
-

------ ----- ---------- - ----------------

我们添加了 config 对象来配置 bodyParser，并确保不会解析 POST 请求的正文。我们还使用 cookie-parser 中间件来解析 cookie。

在登录过程中，我们调用 setCookie 函数将 user 对象存储为 cookie。我们还将 httpOnly 属性设置为 true，以确保 cookie 只能通过 HTTP 传输。在 middleware 导出中，我们将 cookie-parser 中间件添加到 API 端点中。

实现客户端 cookie 管理

在客户端，我们调用 getCookie 函数从 cookie 中获取 user 对象。在 pages/_app.js 文件中添加以下代码：

------ - --------- - ---- -------
------ - ----------- - ---- -------------
------ - ------- - ---- -------------------
------ - --------- - ---- ----------------

-------- ------- ---------- --------- -- -
  ----- -------- - -------------
  ----- ---------- - -----------------

  ------------ -- -
    -- ------------ -
      -----------------------------------------
    -
  -- ---

  ------ ---------- -------------- --
-

------ ------- -----

在 _app.js 文件中，我们使用 useEffect 钩子来检查是否存在 user cookie，如果存在则将其存储在 Redux store 中。

总结

在本文中，我们使用 Next.js 和 Redux 实现了登录授权的本地存储和 cookie 管理。我们还介绍了如何使用浏览器的本地存储和 cookie，以及如何管理客户端和服务器端的 cookie。

实现登录和授权功能是任何 web 应用的关键功能之一。使用 Next.js 和 Redux，我们可以轻松实现这些功能，同时确保数据的安全和保密性。在实际应用中，我们需要根据实际需要和要求来实现登录和授权功能。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64784722968c7c53b0486dab

阅读全文

猜你喜欢

  • Mocha 和 Jest 之间的比较

    前端开发中，单元测试是非常重要的一环。在 JavaScript 应用程序中，Mocha 和 Jest 是两个最受欢迎的单元测试框架。本文将深入探讨这两个框架的区别、优点和缺点，并比较它们的性能、易用性...

    1 年前
  • CSS Grid 如何实现对称式布局

    CSS Grid 是一种二维的网格布局系统，可以方便地实现各种复杂的布局。在这篇文章中，我们将介绍如何使用 CSS Grid 实现对称式布局。 对称式布局 对称式布局是指将一个页面或组件分割成对称的部...

    1 年前
  • Kubernetes 资源的自动伸缩算法是如何实现的？

    Kubernetes 是一种用于自动化应用程序部署、扩展和管理的容器编排工具。对于大规模的应用系统来说，在资源的自动伸缩方面具有非常重要的意义。Kubernetes 支持自动伸缩机制，可通过定义自动扩...

    1 年前
  • MongoDB 教程：如何使用 TTL 指令

    什么是 TTL？ TTL，即 Time To Live，是 MongoDB 中非常重要的一个功能。它允许您设置一个文档的生存时间，一旦超过了规定时间，MongoDB 就会自动将该文档删除。

    1 年前
  • PWA 的背后：Service Worker

    PWA（Progressive Web App）是一种使用现代Web技术实现的移动应用，它比原生应用更灵活、更快速，并且可以离线使用。PWA 的一个关键技术是 Service Worker。

    1 年前
  • Web Components 中的布局方案对比

    Web Components 是一种新兴的前端开发技术，它能够让我们更方便地创建可重用的自定义元素。但是一旦我们创建了自定义元素，如何排布和布局这些元素，就成了一个较为棘手的问题。

    1 年前
  • 如何使用 Hapi 和 Handlebars 进行服务器端呈现

    如何使用 Hapi 和 Handlebars 进行服务器端呈现 随着互联网的发展，前端技术也得到了飞速的发展。前端开发已成为互联网公司最重要的岗位之一。在前端开发中，通常会使用一些框架和库来快速地构建...

    1 年前
  • ECMAScript 2020 (ES11) 中的模块系统详解

    前言 随着前端技术的不断发展，模块化编程已经成为了不可或缺的一环。在之前的 ECMAScript 标准中也有对模块化的支持，但不尽如人意。在 ECMAScript 2020 标准中，模块系统有了一些改...

    1 年前
  • 使用 ESLint 避免产生未使用的依赖

    在开发前端项目时，经常会使用到各种第三方库和插件。但是，一旦项目变得越来越庞大，未使用的依赖就开始浮现。这不仅占用了宝贵的存储空间，还会对项目性能产生负面影响。为了避免这种情况的出现，我们可以使用 E...

    1 年前
  • Babel 在 Vue 项目中的使用方法及配置

    简介 Babel 是一个 JavaScript 编译器，能够将 ECMAScript 2015+ 的代码转换为向后兼容的 JavaScript 代码。在 Vue 项目中，Babel 通常用于将最新版本...

    1 年前
  • 为什么 Deno 中的时间处理有时会出错？

    引言 Deno 是一个基于 V8 引擎的新一代 JavaScript 运行时，它的目标是取代 Node.js。Deno 在很多方面都与 Node.js 相似，但是它有着更加安全和简单的设计。

    1 年前
  • 如何绕过 Cypress 拦截弹窗的问题

    如果你正在使用 Cypress 进行前端自动化测试，你可能遇到过弹窗拦截的问题。如何绕过这个问题？本文将会为你提供一些解决方案。 为什么会有弹窗拦截的问题 在 Cypress 进行自动化测试时，很多时...

    1 年前
  • 如何使用 Webpack 和 Babel 处理 JavaScript

    前言 现在的前端项目变得越来越复杂，如何处理 JavaScript 代码的打包和转译也变得越来越关键。Web 开发者使用 Webpack 和 Babel 来处理 JavaScript 代码的打包和转译...

    1 年前
  • ES2021：如何提高 JavaScript 的可读性

    JavaScript 是一种高级编程语言，被广泛应用于 Web 开发、游戏开发、移动应用开发等多个领域。当我们编写 JavaScript 代码时，除了关注其功能实现外，还需要注意其可读性，因为代码的可...

    1 年前
  • ES6 中数组的 reduce() 方法的正确使用方法

    在 ES6 中，数组的 reduce() 方法可以用于对数组中的每个元素进行操作并返回最终结果。它非常强大且灵活，但也容易被误解和滥用。本文将介绍 reduce() 方法的正确使用方法，并提供实用的示...

    1 年前
  • Docker 优化 MySQL 容器

    Docker 是一种容器化技术，可以将应用程序及其依赖项打包成容器。Docker 容器可以跨平台运行，方便客户端部署。 MySQL 是使用广泛的关系型数据库，很多项目都依赖于 MySQL，那么如何用 ...

    1 年前
  • Sequelize 数据类型详解

    在 Node.js 中，Sequelize 是使用广泛的 ORM（Object-Relational Mapping）工具之一。Sequelize 可以帮助开发者将 JavaScript 对象映射到数...

    1 年前
  • ES7 新增的 Proxy() API

    在 ECMAScript 2016（即 ES7）中，新增了一个非常强大的 API，即 Proxy。这个 API 可以让我们在运行时拦截并自定义某些操作，对于前端开发来说非常有用，可以帮助我们更加灵活地...

    1 年前
  • Serverless 架构如何保障数据安全和隐私

    随着云计算和移动应用的普及，Serverless 架构正在逐渐成为 Web 应用和移动应用的新趋势。与传统的基于虚拟机或容器的架构相比，Serverless 架构具有更高的可扩展性、更短的部署时间和更...

    1 年前
  • SSE 中数据缓存和恢复的实现方法

    Server-Sent Events (SSE) 是一种用于实时推送服务器数据的 Web 技术。在 SSE 中，服务器通过 HTTP 协议向客户端发送一条长连接，然后定期向客户端发送更新数据，客户端通...

    1 年前

相关推荐

    暂无文章