NodeJS 当用户在Next.js应用中导航到/route时，如何检查jwt令牌是否存在于本地存储中

r9f1avp5 于 2023-10-17 发布在 Node.js

关注(0)|答案(1)|浏览(78)

我使用Next.js（版本13）作为前端，Express作为后端。
值得一提的是，我的服务器是在不同的端口。
NEXTjs localhost：3000/ route

"use client";

import { useEffect, useState } from "react";
import axios, { AxiosResponse } from "axios";
import { useRouter } from "next/navigation";

export default function Home() {
  const [profile, setProfile] = useState<AxiosResponse | null>(null);
  const [authToken, setAuthToken] = useState<string | null>(null);
  const router = useRouter();

  useEffect(() => {
    async function getProfile() {
      try {
        const authToken = localStorage.getItem("x-auth-token");
//sending token to back to verify it
        const profile = await axios.get(
          `${process.env.NEXT_PUBLIC_SERVER_URL}/api/user`,
          {
            headers: {
              "x-auth-token": "authToken",
            },
          }
        );
        setProfile(profile);
      } catch (error) {
        
      }
    }

    getProfile();
  }, []);

  if (!profile) {
    return <p>Loading...</p>;
  }

  console.log(profile);

  return <p>test</p>;
}

我混淆了这个客户端/服务器组件在接下来，如果有人能写我的例子，我应该如何做正确的认证，将不胜感激。
我想写可重用的功能，这将检查本地存储中的jwt令牌，如果存在发送到我的后端来验证它。如果令牌不存在或无效-重定向到localhost：3000/login

node.js

来源：https://stackoverflow.com/questions/77302316/how-to-check-if-jwt-token-is-present-in-local-storage-when-user-navigates-to-ro

1条答案

按热度按时间

bvk5enib1#

代码有很多需要设置的地方。我会建议你使用一些状态管理库，如redux工具包。这允许您在组件之间全局共享状态。

首先，你可以定义你的函数来调用你的后端API相关的身份验证，如登录，注销，刷新你的令牌。你可以使用axios或者fetch来实现。
为你的每个函数添加一个thunk。这在redux状态管理之前作为你定义的函数的中间件。
用你需要的状态定义你的auth切片。同样，将你的形实转换程序绑定到extraReducers中。
使用dispatch来触发定义的PDMC形实转换函数。
您可以使用useeffect添加一些interval函数，并在根布局上调度刷新形实转换程序，以定期刷新令牌

有一个教程，你可以遵循与此相关的：https://blog.logrocket.com/handling-user-authentication-redux-toolkit
由于您使用的是nextjs13，请记住默认情况下nextjs将使用服务器端渲染。因此，当你在本地存储中读取或写入你的值时，你需要检查当前是否在客户端。大概是这样的：

// initialize userToken from local storage
const getUserToken = () => {
    if (typeof window !== "undefined") {
        const token = localStorage.getItem('userToken')
    }
return null
}

赞(0）回复(0）举报 2023-10-17

我来回答

NodeJS 当用户在Next.js应用中导航到/route时，如何检查jwt令牌是否存在于本地存储中

1条答案

相关问题

热门标签

最新问答