登录系统的安全问题

Question

我正在使用 redux 和 react 构建一个像 Instagram 这样的网络应用程序。索引页包含登录系统，主页取决于用户是否登录。

在我的主页中，我使用用户信息和令牌状态来决定是进入主页还是登录页面。如果我没有登录，只是在localStorage中创建令牌，那么我仍然可以转到主页。但是我面临的问题是，如果我不使用令牌来确定用户应该看到哪个页面，因为即使是用户登录，如果用户按下重新加载，那么他们可以在几秒钟内看到登录页面并转到主页（由于获取的持续时间）

我应该使用令牌来确定用户应该看到哪个页面或任何建议吗？谢谢！

auth Reducer

import { createSlice } from "@reduxjs/toolkit";
import { getAuthToken, setAuthToken } from "../../utlis";
import { registerAPI, loginAPI, getMeAPI } from "../../services/authAPI";

export const authSlice = createSlice({
  name: "auth",
  initialState: {
    user: null,
    alertMsg: null,
    isLoadingUser: false,
  },
  reducers: {
    setUsers: (state, action) => {
      state.user = action.payload;
    },
    setAlertMsg: (state, action) => {
      state.alertMsg = action.payload;
    },
    setIsLoadingUser: (state, action) => {
      state.isLoadingUser = action.payload;
    },
  },
});

export const { setUsers, setAlertMsg, setIsLoadingUser } = authSlice.actions;

export const getCurrentUser = () => (dispatch) => {
  dispatch(setIsLoadingUser(true));
  if (getAuthToken()) {
    return getMeAPI().then((res) => {
      dispatch(setIsLoadingUser(false));
      if (res.message !== "Successfully get the user") {
        setAuthToken(null);
        return;
      }
      dispatch(setUsers(res));
      return res;
    });
  }
  dispatch(setIsLoadingUser(false));
};

export const login = (email, password) => (dispatch) => {
  dispatch(setIsLoadingUser(true));
  return loginAPI(email, password).then((res) => {
    if (res.message !== "Successfully login") {
      dispatch(setAlertMsg(res.message));
      return;
    }
    setAuthToken(res.token);
    return dispatch(getCurrentUser());
  });
};

主页

const classes = useStyles();
  const user = useSelector(selectUser);
  console.log(user);
  const token = getAuthToken();

  return user || token ? (
    <>
      <Container maxWidth="lg" className={classes.root}>
        <Paper className={classes.paper}>Posts You've Liked</Paper>
        <Grid container direction="row" justify="center">
          <Grid item xs={12}>
            <GridList />
          </Grid>
        </Grid>
        <Button
          variant="contained"
          color="primary"
          size="large"
          className={classes.button}
          startIcon={<ArrowDropDownCircleRoundedIcon />}
        >
          Read More
        </Button>
        {/* press read more and call the content api */}
        <Grid container spacing={1} direction="row" justify="center">
          <Grid item xs={12} sm={3}>
            <SimpleCardComponent />
          </Grid>
          <Grid item xs={12} sm={3}>
            <SimpleCardComponent />
          </Grid>
          <Grid item xs={12} sm={3}>
            <SimpleCardComponent />
          </Grid>
          <Grid item xs={12} sm={3}>
            <SimpleCardComponent />
          </Grid>
        </Grid>
      </Container>
    </>
  ) : (
    <SignInPage />
  );