我正在使用 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 />
);