使用JWT存储用户数据

Question

我正在通过Apollo客户端从GraphQL后端获取用户数据。我的目标是保持用户登录，因此我用所有用户数据签署了JWT令牌，将其传递给LocalStorage（仅代币），将其解码，并将所有值传递给Redux-store。

       UserModel:
 userSchema.methods.createJWT = function (payload) {
      return jwt.sign({ ...payload }, process.env.JWT_SECRET, {
        expiresIn: '1d',
      });
    };

UserLogin：

      await user.save();
      return {
        ...user._doc,
        id: user._id,
        token: user.createJWT(user._doc),
}

ReduxSlice

const userSlice = createSlice({
  name: 'user',
  initialState: {
    userInfo: localStorage.getItem('jwtToken')
      ? jwtDecode(localStorage.getItem('jwtToken'))
      : null,
  },  
  reducers: {
    loginUser: (state, action) => {
      localStorage.setItem('jwtToken', action.payload.token);
      state.userInfo = action.payload;
    },

我想知道该令牌是否可以持有太多信息，这是否还可以 像：

{
  "_id": "62a9ee3878c4979fedb471c5",
  "username": "***",
  "email": "***",
  "password": "$2a$12$hN2lfCtEbqOOFSlHpapyfuxYAHdEGUYKeHY4BMK1YvYOtSG7zHwcS",
  "isAdmin": false,
  "shippingAddress": [],
  "createdAt": "2022-06-15T14:35:36.877Z",
  "updatedAt": "2022-06-16T09:04:59.367Z",
  "__v": 0,
  "firstName": "***",
  "lastName": "***",
  "shoeSize": 4,
  "iat": 1655371413,
  "exp": 1655457813
}

还有另一种保存用户数据并保持他登录的有效方法？

Answer 1

不建议（实际上非​​常危险）使用JWT令牌特别密码返回所有信息。我认为USERID就足够了！
但是您也可以返回用户名，firstName，lastname，等。
但是，在某些情况下，由于某些用户隐私原因，甚至返回电子邮件地址也不是一个好方法。

我的意思是，您只需要一旦有用户就可以获取用户ID，并且凭据是正确的，那么：

const userToken = {
  userId: user._id,
  username: user.username,
};
 
return {
  user,
  token: user.createJWT(userData)
};

现在，在签署了JWT令牌后，您可以在某些Redux状态甚至React上下文（选择您的喜欢）中设置用户中的任何数据，但不要在LocalStorage中设置任何密码。

更新：最后，您应该从有效载荷中存储用户：

state.userInfo = action.payload.user;

顺便说一句，您应该检查localStorage仅用于获取令牌并验证它，然后根据用户ID进行获取用户并存储它，以下是一个示例：

  const getUser = React.useCallback(async (userId) => {
    try {
      const res = await axios.post('/auth/login', {userId}, {
        credentials: 'include',
        withCredentials: true
      });
      const { accessToken, user } = res.data;
      setState((currentState: IState) => ({
        ...currentState,
        user,
        loading: false,
        isAuth: !!accessToken,
        accessToken
      }));
    } catch (err) {
      setState((currentState: IState) => ({
        ...currentState,
        user: null,
        loading: false,
        isAuth: false,
        accessToken: ''
      }));
    }
  }, []);

  useEffect(() => {
    getUser(userId);
  }, [getUser]);

  useEffect(() => {
  const jwtToken = localStorage.getItem('jwtToken');
    if (jwtToken && jwt_decode(jwtToken)) {
      const { exp } = jwt_decode(jwtToken);
      const currentTime = Date.now() / 1000;
      if (exp < currentTime) {
        getUserById(userId);
      }
    }
  }, [getUser]);