如何检测 React 父组件中的本地存储集

Question

我有一个身份验证服务，可以在成功登录后设置本地存储令牌

身份验证服务：

async function login(email, password, remember) {
  const data = await ApiClient.post(`/api/auth`, { 
    email: email, password: password, remember: remember 
  });
  localStorage.setItem('token', data.token);
  return data.token;
}

async function logout() {
  localStorage.removeItem('token');
}

export const authenticationService = {
  login,
  logout,
  get currentUserValue () { return localStorage.getItem('token') }
}

App.js

{ authenticationService.currentUserValue &&
<Menu>Logged In</Menu> }
<Switch>
  <PrivateRoute path="/dashboard" component={Dashboard} />
  <Route path="/login" component={Login} />
  <Route component={Error404} />
</Switch>

Login.js

async function login(e) {
    e.preventDefault();
    try {
      const token = await authenticationService.login(email, password, remember);
      setErrorMsg('');
      history.push('/dashboard');
    } catch (err) {
      if(err.response.status === 401) {
        setErrorMsg('Unauthorized access, please login again.');
      }
    }
  }
<form className={classes.form} noValidate onSubmit={login}>
  <TextField value={email} /> 
  <TextField value={password} /> 
  <FormControlLabel
    control={<Checkbox value="remember" color="primary" />}
    label="Remember me"
    onChange={(e) => setRemember(e.target.value)}
    value={remember}
  />
  <Button type="submit">Sign In</Button>
</form>

当我使用Login.js 中的表单登录时，它不会从App.js 呈现菜单<Menu>Logged In</Menu>。当我们在 localstorage get currentUserValue () { return localStorage.getItem('token') } 中设置令牌值并在登录后渲染菜单时，有没有办法重新渲染？

Answer 1

您需要将令牌存储在某个状态的某个地方。然后根据令牌的状态呈现您的视图。

创建挂钩并分离一些关注点。身份验证现在需要获取和存储令牌。在这些钩子中拆分这两个：存储钩子和身份验证钩子。

存储挂钩将创建一个您可以读取和写入令牌的状态。它还会根据令牌中的值更新localStorage 项。

返回token 和setToken 函数供其他组件或挂钩使用。

const useTokenStorage = () => {
  const [ token, setToken ] = useState(() => {
    const token = localStorage.getItem('token');
    return token !== null ? token : ''
  });

  useEffect(() => {
    if (token === '') {
      localStorage.removeItem('token');
    } else {
      localStorage.setItem('token', token);
    }
  }, [token]);

  return [ token, setToken ];
};

身份验证服务挂钩将使用存储挂钩来设置令牌的值。 login 和 logout 函数将使用setToken 更新token 的值，而setToken 又将更新localStorage。

从钩子返回token、login和logout函数，所以token只能通过login和logout函数更新。当然可以通过token 属性阅读。

const useAuthenticationService = () => {
  const [ token, setToken ] = useTokenStorage();

  const login = async (email, password, remember) => {
    const data = await ApiClient.post(`/api/auth`, { 
      email: email, password: password, remember: remember 
    });
    setToken(data.token);
  };

  const logout = () => {
    setToken('');
  };

  return { token, login, logout };
};

在组件中使用useAuthenticationService 挂钩，您需要根据token 确定要呈现的内容，就像在您的App.js 中一样

// App.js
const AppComponent = () => {
  const { token } = useAuthenticationService();

  return (
    { token && <Menu>Logged In</Menu> }
    <Switch>
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route path="/login" component={Login} />
      <Route component={Error404} />
    </Switch>
  );
};

并在需要更新令牌状态的地方使用login 和logout 函数。

// Login.js
const LoginComponent = () => {
  const { login, logout } = useAuthenticationService();

  async function handleSubmit(e) {
    e.preventDefault();
    try {
      await login(email, password, remember);
      history.push('/dashboard');
    } catch (err) {
      if(err.response.status === 401) {
        setErrorMsg('Unauthorized access, please login again.');
      }
    }
  }

  render(
    <form className={classes.form} noValidate onSubmit={handleSubmit}>
      <TextField value={email} /> 
      <TextField value={password} /> 
      <FormControlLabel
        control={<Checkbox value="remember" color="primary" />}
        label="Remember me"
        onChange={(e) => setRemember(e.target.value)}
        value={remember}
       />
      <Button type="submit">Sign In</Button>
    </form>
  );
}

token 现在应该与localStorage 同步，即使在您导航或刷新页面时也是如此。