我正在尝试获取localStorage，但遇到了一个错误
我正在使用redux/toolkit，当我登录到我的用户时，我会获取所有的信息并将值存储在localStorage中。
我要做的是身份验证，在用户登录后，它会将其信息存储到localStorage，然后使导航条动态化，但是在我执行之前，这里已经出现了一个问题
但是，在刷新页面或将其重定向到另一个URL后，我会得到以下错误
Uncaught SyntaxError: Unexpected token 'e', "eyJhbGciOi"... is not valid JSON它说它在UserSlice.js有一个错误
这是我的调度操作/api调用
export const loginUser = async (userData, dispatch) =>{
dispatch(loginStart())
try {
const res = await publicRequest.post('/auth/login', userData)
const item = res.data?.accessToken
localStorage.setItem('user', item)
dispatch(loginSuccess(res.data))
} catch (error) {
const message =
"Wrong Username or Email "
dispatch(loginFailure(message))
}
}UserSlice.js
import {createSlice} from '@reduxjs/toolkit'
export const userSlice = createSlice({
name: 'user',
initialState : {
user: JSON.parse(localStorage.getItem("user")) || null,
isError: false,
isSuccess: false,
isLoading: false,
message: ''
},
reducers: {
resetStates: (state) =>{
state.isLoading = false;
state.isError = false;
state.isSuccess = false;
state.message = ""
},
loginStart: (state) => {
state.isFetching = true;
},
loginSuccess: (state, action) => {
state.isFetching = false;
state.isSuccess = true;
state.user = action.payload
},
loginFailure: (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload
state.user = null
},
logoutUser: (state) =>{
state.user = null
}
}
})
export const { loginStart, loginSuccess, loginFailure, resetStates, logoutUser} = userSlice.actions;
export default userSlice.reducer我做得对吗?还是我做得不好？
回答 3
Stack Overflow用户
发布于 2022-10-05 14:14:06
根据您所做的，您已经将LocalStorage项设置为"string“。
您不能使用JSON.parse解析字符串。
您必须使用JSON.stringify()，因为此方法将JavaScript值转换为JSON字符串。
以下是JSON.stringify()的链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Stack Overflow用户
发布于 2022-10-05 14:37:35
根据@mplungjan的注释，JSON.parse()只能解析JSON (可以解析为JSON的字符串)，但值localStorage.getItem("user")不是JSON。
只需使用localStorage.getItem("user") || null。
Stack Overflow用户
发布于 2022-10-05 14:47:15
如果您不想更改localStorage中的数据存储类型，您可以简单地这样做
..
initialState : {
user: JSON.parse(JSON.stringify(localStorage.getItem("user"))) || null,
// or user: localStorage.getItem('user') || null,
// both of them correct
isError: false,
isSuccess: false,
isLoading: false,
message: ''
},
..我建议您使用user: localStorage.getItem('user') || null
可选
但我可以建议您为将存储在localStorage__中的数据命名和建模。存储在localStorage中的值是用户的访问令牌。它不是用户。所以你可以像这样设置这个项目
// storing in obj.
const user = { token: <access_token> };
..
// stringifying for storage
localStorage.setItem('user',JSON.stringify(user));
..
// parsing for access
user: JSON.parse(localStorage.getItem("user"))https://stackoverflow.com/questions/73961527
复制相似问题
腾讯云开发者
