Reactjs 登录系统的安全问题

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

在我的主页中，我使用用户信息和令牌状态来决定是进入主页还是登录页面。如果我没有登录，只是在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 />
  );

const classes=useStyles（）；
const user=useSelector（selectUser）；
console.log（用户）；
const token=getAuthToken（）；
返回用户| |令牌？(
你喜欢的帖子
阅读更多
{/*按read more并调用内容api*/}
) : (
);

您可以创建一个包装器组件，尝试获取和验证令牌。如果一切正常，它将呈现其子对象，否则将发送用户登录。然后您可以简单地使用这个包装器来保护您的任何路由。你可以在谷歌上搜索并获得大量的例子。你能解释一下你建议的方法吗？试着在谷歌上搜索

protect-routes-react

，你应该会得到一些对你有帮助的例子。我不能在这里提供外部链接