在 React 中刷新后保持'isAuthenticated'状态

Question

登录后，isAuthenticated的状态为true，但刷新时状态变为false！那么，在我登录后保持isAuthenticated为真的最佳解决方案是什么？在AuthService中，代码为：

const Axios = require('axios');
export default {
isAuthenticated: () => {
return Axios({
url: 'http://localhost:4000/user/authenticated',
method: 'GET',
})
.then((res) => {
if (res.status !== 401) return res.json().then((data) => data);
else
return {
isAuthenticated: false,
user: {
firstName: ' ',
lastName: ' ',
email: ' ',
},
};
})
.catch((err) => {
console.log('isAuthenticated err :' + err);
return {
isAuthenticated: false,
user: {
firstName: ' ',
lastName: ' ',
email: ' ',
},
};
});
},
};

在AuthContext:中

import React, { createContext, useState, useEffect } from 'react';
import AuthService from '../Services/AuthService';
export const AuthContext = createContext();
export default ({ children }) => {
const [user, setUser] = useState(null);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
AuthService.isAuthenticated().then((data) => {
console.log('is authenticated  :' + data.isAuthenticated);
setUser(data.user);
setIsAuthenticated(data.isAuthenticated);
setIsLoaded(true);
});
}, []);
return (
<div>
{!isLoaded ? (
<h1>Loading</h1>
) : (
<AuthContext.Provider value={{ user, setUser, isAuthenticated, setIsAuthenticated }}>
{children}
</AuthContext.Provider>
)}
</div>
);
};

在index.js中，我在Auth提供商之间封装了应用程序

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import AuthProvider from './context/AuthContext';
ReactDOM.render(
<AuthProvider>
<React.StrictMode>
<App />
</React.StrictMode>
</AuthProvider>,
document.getElementById('root'),
);

这是app.js:

import React, { useContext } from 'react';
import Navigation from './components/Navigation';
import Home from './components/Home';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Dashboard from './components/user/Dashboard';
function App() {
const { isAuthenticated } = useContext(AuthContext);
return (
<Router>
{isAuthenticated ? (
<Switch>
<Route path="/dashboard" component={Dashboard} />
</Switch>
) : (
<div className="App">
<Navigation />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/produit" component={Produit} />
</Switch>
</div>
)}
</Router>
);
}
export default App;

Answer 1

localStorage.setItem("user", "Hamza");
// refresh page...
localStorage.getItem("user"); // should return Hamza

Answer 2

您可以使用jwt令牌将当前用户的数据保存在本地存储或会话存储中。我在这里用了RxJ。

通过getCurrentUser功能，您可以获得当前用户的详细信息。

您必须从后端生成jwt令牌，并从前端接收它，然后将其保存在localStorage中。阅读有关使用jwt令牌的更多信息https://jwt.io/introduction/

你可以试试下面的例子：

AuthContext.js

import jwt_decode from "jwt-decode";
const [user, setUser] = useState({
isAuthenticated: false,
currentUser: "",
});
useEffect(() => {
AuthService.getAuthStatus().subscribe((res) => {
console.log(res);
setUser({
isAuthenticated: true,
currentUser: jwt_decode(localStorage.jwtToken),
});
});
console.log(state.currentUser);
},[]);

AuthService.js

import { Subject } from "rxjs";
const isAuthenticated = new Subject(false);
const currentUser = new Subject();
const user = new Subject();
export const AuthService = {
isAuthenticated : ()=>{
return  Axios({
url: "http://localhost:4000/user/authenticated",
method: "GET",

}).then(res=>{
if(res.status !== 401)
.then(res =>{
const { token } = res.data;
localStorage.setItem("jwtToken", token);
isAuthenticated.next(true);
});
else
return {
isAuthenticated : false, 
user:{
firstName:" ",
lastName:" ",
email:" "}};
})
setCurrentUser: (decoded) => {
setAuthToken(localStorage.getItem);
currentUser.next(decoded);
isAuthenticated.next(true);
},
getAuthStatus: () => isAuthenticated.asObservable(),
getCurrentUser: () => currentUser.asObservable(),
};