Перенаправление на страницу входа с использованием промежуточного программного обеспечения 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')
Пожалуйста, помогите мне в этом
Спасибо!