Перенаправление на страницу входа с использованием промежуточного программного обеспечения Next JS с использованием локального хранилища или контекстного API.

Я работаю над следующими 13 и хочу перенаправить пользователей обратно на страницу входа, если они заходят на страницу без входа в систему. Я уже сделал страницу входа

Как только пользователь войдет в систему, я должен управлять AuthContext, и везде я буду получать статус того, вошел ли пользователь в систему или нет.

контекст/AuthContext.js

      import React, { useState } from "react";

export const Context = React.createContext();

const Provider = props => {
  const aCallback = () => {
    alert("HEY FROM METHOD");
    setAuth("");
  };

  const isSignedIn = window.localStorage.getItem("AuthToken");
  const [auth, setAuth] = useState(isSignedIn ? true : false);

  return (
    <Context.Provider
      value={{
        auth,
        updateAuth: auth => setAuth(auth),
        aCallback: aCallback
      }}
    >
      {props.children}
    </Context.Provider>
  );
};

export default Provider;

промежуточное программное обеспечение.js

      import { useContext } from 'react';
import { Context } from "@/context/AuthContext";
import { NextResponse } from "next/server";
import { redirect } from "next/navigation.js";
export default async function middleware(req) {
   const { auth, updateAuth } =  useContext(Context);
   if (auth) {
   }
   if(req.nextUrl.path !="/login" && !auth){
      if(req.nethod != 'POST'){
         return redirect("/");
         //return new NextResponse("Cannot access this endpoint with " + req.method, { status: 400})
      }
   return NextResponse.next();
   }
}

Я пытался перенаправить пользователей, если они не вошли в систему из промежуточного программного обеспечения, но оно возвращает ошибку.TypeError: Cannot read properties of null (reading 'useContext')

Пожалуйста, помогите мне в этом

Спасибо!

0 ответов

Другие вопросы по тегам