我的认证背景提供者如下。 我在成功认证用户时确定了一些象征性的价值。
import axios from "axios";
import { createContext, useContext, useState } from "react";
import Constants from "../common/Constants";
import Payload from "../classes/Payload";
const AuthenticationContext = createContext({
loggedUserToken: {},
session: {}
});
export const useAuthenticationStatus = () => useContext(AuthenticationContext);
const AuthenticationContextProvider = ({children}) => {
const [loggedUserToken, setLoggedUserToken] = useState({});
const [session, setSession] = useState({});
const authenticateUser = async (loginEndpoint, email, userPassword) => {
let result = {};
let statusCode = -1;
let statusText = ;
let message = ;
let session = ;
let postData = {username: email, password: userPassword};
await axios.post(loginEndpoint, postData, {headers: headerData})
.then( data => {
statusCode = data.data.code;
statusText = data.data.statusText;
session = data.data.session;
message = data.data.message;
if (statusCode === 200) {
let challengeName = message.challengeName;
let payloadData = ;
if (session !== null && message.challenge !== null) {
let userEmail = message.userEmail;
setSession({ sD : session, sE : userEmail });
if (challengeName === Constants.COGNITO_CHALLENGE_NEW_PASSWORD_REQUIRED ) {
statusText = Constants.AUTHENTICATION_SET_NEW_PASSWSORD;
payloadData = challengeName;
}
result = { s : true, sT : statusText, p : payloadData};
} else {
statusText = Constants.AUTHENTICATION_LOGIN_SUCCESSFUL;
payloadData = message;
let userpayloadData = new Payload(payloadData);
//set use state for user token - ERROR IN HERE
//loggedUserToken IS NOT SET HERE
setLoggedUserToken(loggedUserToken => userpayloadData);
result = { s : true, sT : statusText, p : payloadData};
}
}
}).catch( error => {
result = { s : false, sT : Constants.COMMON_ERROR_MESSAGE, p : };
});
return result;
}
return (
<AuthenticationContext.Provider
value={{loggedUserToken, authenticateUser, session, setPermanentPassword}}>
{children}
</AuthenticationContext.Provider>
)
};
export default AuthenticationContextProvider;我在家中使用了“超标的User Token”值,以检查其有无。
import { useEffect } from "react";
import { useAuthenticationStatus } from "../../services/AuthenticateContextProvider";
function HomeView() {
const {loggedUserToken} = useAuthenticationStatus();
//empty object output
console.log(loggedUserToken);
useEffect( () => {
//empty object output
console.log(loggedUserToken);
})
return (
<div className="col-12">
<div className="row mt-2">
<div className="col-12">
</div>
</div>
<div className="row mt-5 incident-list-map">
<div className="col-md-4">
<h2>List</h2>
<div></div>
</div>
<div className="col-md-8">
<div id="map" className="map">
</div>
</div>
</div>
</div>
);
}
export default HomeView;即使你将其归入认证提供者,“挂号为User Token”总是空洞的(即使你在“LobedUser Token”之后将它排在认证提供者手中)。 在适当确定“企业”的情况下,我从不同的角度看待这一价值。
I am not sure what is going wrong in here
UPDATE: below is how I use the authentication provider. The "Outlet" replaces the different views in the MainLayout.
import { Outlet } from "react-router-dom";
import MainHeader from "../common/MainHeader";
import MainFooter from "../common/MainFooter";
import AuthenticationContextProvider from "../../services/AuthenticateContextProvider";
function MainLayout() {
return(
<div className="main-layout">
<AuthenticationContextProvider>
<header>
<nav className="navbar navbar-expand-md fixed-top header-area">
<MainHeader></MainHeader>
</nav>
</header>
<main className="flex-shrink-0 main-area">
<div className="container-fluid">
<div className="main-content">
<Outlet />
</div>
</div>
</main>
<footer className="footer mt-auto py-3 footer-content">
<div className="container-fluid">
<MainFooter></MainFooter>
</div>
</footer>
</AuthenticationContextProvider>
</div>
);
}
export default MainLayout;