javascript - 使用 react + localstorage 进行身份验证
问题描述
我编写了以下代码来通过反应进行身份验证,但有一个问题。用户登录后,在本地存储中设置令牌并将用户重定向到仪表板并在此页面中检查本地存储中的令牌,如果不存在则将用户重定向到登录页面,我的问题就在这里!当进入仪表板页面时无法获取令牌,因为向我返回 null 但如果刷新页面返回令牌!
实际上,设置后我无法获得令牌。
我的代码是:
export const userLogin = (data) => {
return (dispatch) => {
return axios.post(API.USER_LOGIN,data).then((response) => {
dispatch(loginSuccess());
setToken(response.data.token);
dispatch(setUserToken(response.data.token))
}).then(() => {
dispatch(fetchUser());
}).catch((error) => {
dispatch(setFormErrors({errors: error.response.data}));
})
}
};
export const fetchUser = () => {
return (dispatch, getState) => {
dispatch(authLoading(true));
const { userToken } = getState().auth;
return axios.post(API.CURRENT_USER, null, {
headers: { authorization: `Bearer ${userToken}` },
}).then((response) => {
const { id, name, username, email } = response.data.user;
dispatch(setCurrentUser({current_user: { id, name, username, email }}));
dispatch(authLoading(false));
}).catch((error) => {
if(error.response.status) {
dispatch(logout());
}
});
};
};
export const checkToken = () => {
return async (dispatch, getState) => {
const token = await getToken();
const { userToken } = getState().auth;
if (token || userToken) {
dispatch(loginSuccess());
dispatch(fetchUser());
}
};
}
export const setToken = token => localStorage.setItem('token', token);
export const getToken = () => localStorage.getItem('token');
export const clearToken = () => localStorage.removeItem('token');
解决方案
推荐阅读
- d3.js - Puppeteer 拍摄 SVG 的模糊截图
- javascript - video 标签在 zend 框架 1.11 中不起作用
- docker - Docker CMD 和 Mount 相互排斥
- python - Tensor Tensor("mrcnn_detection_1/Reshape_1:0", shape=(1, 60, 6), dtype=float32) 不是该图的元素
- python - 创建字典列表而不覆盖
- javascript - 为什么在“passport.authenticate()”之后添加“(req, res)”?
- powershell - 如何通过动态参数实现`DynamicParam`?
- php - 如何在所有刀片视图中获取全局用户配置文件数据?
- reactjs - React Native 和 Firestore
- python - 如何使用 tensorflow_io 的 IODataset?