【问题标题】：Problem in implementing hardcoded Auth in Reactjs在 Reactjs 中实现硬编码 Auth 的问题
【发布时间】：2021-05-05 05:21:15
【问题描述】：

我想在 reactjs 中实现一个硬编码的身份验证，即，如果用户输入一个特定的字符串，那么就没有访问权限。我的 app.js 代码如下：

function App() {

    const[user, setUser]= useState(false);
    const[ID, setID]= useState('');
    const[IDError, setIDError]= useState('');

    const clearErrors = () =>{
        setIDError('');
    }


    const handleLogin=()=>{
        clearErrors();
        if(ID==="quantel123"){
            setUser(true);
        }else if(ID===""){
            setIDError("This field can't be empty. Access denied!");
        }else{
            setIDError("The ID entered is wrong");
        }
    };

    const handleLogout=()=>{
        if (window.confirm('Are you sure you want to Logout?')){
            setUser(false);
        }
    };

    useEffect(()=>{
        const authListener=()=>{
            if(user){
                setUser(user);
            }else{
                setUser(false);
            }
           
        };

        authListener();
    }, [user]);

  
  return (
    <Router>
    {user?(
        <Grid container direction="column">
            <Grid item>
                <Navbar />
            </Grid>
            <Grid item container>
                <Grid item xs={false} sm={2}>
                    <Sidebar handleLogout={handleLogout} />
                </Grid>
                <Grid item xs={12} sm={10}>
                    <Switch>
                        <Route exact path="/login"><Redirect to="/" /></Route>  
                        <Route exact path="/" component={Home}/>
                        <Route exact path="/Bookings" component={EnhancedBookingTable}/>
                        <Route component={Error}/>
                    </Switch>
                </Grid>
            </Grid>
        </Grid> 
    ):(
        <>
            <Redirect to="/login" />
            <Route exact path="/login" render={(props)=>(
                <Login {...props}
                    ID={ID}
                    setID={setID}
                    handleLogin={handleLogin}
                    IDError={IDError}
                    setIDError={setIDError}
                />
            )}/>
        </>
    )}
    </Router>
  );
}

export default App;

硬编码的身份验证工作正常。但是只有一个问题，即每当刷新页面时，用户就会被注销。这是因为 setUser 值在每次重新渲染时都被初始化为 false。这个怎么处理？

【问题讨论】：

将你的状态保存到localStorage，在组件挂载时读取它并相应地初始化你的状态。如果您需要示例，我可以提供。
是的！示例会很好，因为我是 reactjs 新手
和redux有关吗？
不，localStorage 与 Redux 无关，但 Redux 状态往往持久化到 localStorage/persistent storage。你的解决方案是否需要与 Redux 相关？
不！我只是感到困惑，因为 redux 还创建了一个本地存储来保存状态。我说的对吗？

标签： reactjs authentication

【解决方案1】：

React 状态仅存在于内存中，当您重新加载页面时，它会从头开始重置。您可以使用 localStorage 来保存您的用户状态。

// state initializer function
const [user, setUser] = useState(() => {
  const loggedIn = localStorage.getItem("auth");
  return JSON.parse(loggedIn) ?? false;
});

// persist state to local storage on updates
useEffect(() => {
  localStorage.setItem("auth", JSON.stringify(user));
}, [user]);

演示

【讨论】：