[英]React authentication with Context API
I've had a problem with authentication using react api context.我在使用 react api 上下文进行身份验证时遇到问题。 When I type the login credentials into the form, with the rest api I get an access token, when I get it it sets it to the value "session" in my localStorage and redirect to routes.home
which is in my routing
array using in Main.tsx
to hold private routes.当我在表单中输入登录凭据时,使用 rest api 我得到一个访问令牌,当我得到它时,它将它设置为我的 localStorage 中的值“会话”并重定向到我的routing
数组中的routes.home
使用Main.tsx
保存私有路由。 But when i'm redirecting to this home
page i'm facing with many nullpointers from Header.tsx
cause my account
taken from useContext(AppContext)
is null.但是当我重定向到这个home
时,我面临着来自Header.tsx
的许多空指针,因为我从useContext(AppContext)
获取的account
是 null。 Sometimes i've had also loop over logic in useEffect
at App.tsx
.有时我还在useEffect
的App.tsx
中循环了逻辑。
In App.tsx i'm trying to fetch from rest api the whole object of the current user and set to provider.在 App.tsx 中,我试图从当前用户的 rest api 获取整个 object 并设置为提供者。
can someone tell me what i'm doing wrong and how to properly set data to provider an use this data via useContext
?有人可以告诉我我做错了什么以及如何正确设置数据以提供通过useContext
使用这些数据吗?
here is my code:这是我的代码:
login/index.tsx登录/index.tsx
const onFinish = async (form: any) => {
try {
const response = await axios.post("/auth/login", {
email: form.email,
password: form.password
});
const token = response["token"];
if (token) {
localStorage.setItem("session", token);
history.push(routes.home)
}
} catch (error) {
}
};
Header.tsx Header.tsx
export const Header = () => {
const { account } = useContext(AppContext);
return (
//here is using `account` to display eq. `account.name`
);
}
Main.tsx主要.tsx
export const Main = ({ account, children }) => {
return (
<AppContextProvider account={account}>
//div's, styles, components, etc.
</AppContextProvider>
App.tsx应用程序.tsx
export default function App() {
const [accountData, setAccountData] = useState(null);
const history = useHistory();
useEffect(() => {
if (localStorage.getItem("session")) {
const token = localStorage.getItem("session");
const decode = jwt(token);
const query = {
id: decode["id"]
}
const accountResponse: any = async () => {
const response = await api.get("/auth/account", query);
setAccountData(response);
history.push(routes.dashboard);
}
accountResponse();
} else {
history.push(publicRoutes.login);
}
})
return (
<div className="App">
<Switch>
{publicRouting.map(({ path, component }, i) => (
<Route key={i} path={path} component={component} />
))}
<Main account={accountData}>
{routing.map(({ path, component }, i) => (
<Route key={i} path={path} component={component} />
))}
</Main>
</Switch>
</div>
);
}
AppContextProvider.tsx AppContextProvider.tsx
export const AppContextProvider: FC<AppContextProviderProps> = ({ account, children }) => {
return (
<AppContext.Provider
value={{
account: account
}}
>
{ children}
</AppContext.Provider>
)
}
thanks for any help!谢谢你的帮助!
You can see my code here: https://github.com/muhammadyunusuz/React-Login-Exemple你可以在这里看到我的代码: https://github.com/muhammadyunusuz/React-Login-Exemple
I created custom hook.我创建了自定义钩子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.