Блог

Привет, я использую express для внутренней аутентификации, и это мои функции / контроллеры входа в интерфейсе.

 export const signInUser = async credentials => {
    console.log('this is for the signInUser', credentials)
  try {
    const resp = await api.post('/sign-in', credentials)
    localStorage.setItem('token', resp.data.token)
    return resp.data
  } catch (error) {
    throw error
  }
}

    onSignIn = event => {
        event.preventDefault()

        const { history, setUser } = this.props
        signInUser(this.state)
            .then(res => setUser(res.user))
            .then(() => history.push('/Home'))
            .catch(error => {
                console.error(error)
                this.setState({
                    loginUsername: '',
                    loginPassword: '',
                })
            })
    }

setUser = user => this.setState({ user })
 

а это мой контроллер входа в систему на серверной части

 const signIn = async (req, res) => {
  try {
    console.log('hello' ,req.body);
    const { loginUsername, username, loginPassword } = req.body;
    const user = await User.findOne({
      where: {
        username: loginUsername
      }
    });
    console.log('this is the user', user)
    if (await bcrypt.compare(loginPassword, user.dataValues.password_digest)) {
      const payload = {
        id: user.id,
        username: user.username,
        password: user.password
      };
      const token = jwt.sign(payload, TOKEN_KEY);
      return res.status(201).json({ user, token });
    } else {
      res.status(401).send("Username or Password is invalid- try again.");
    }
  } catch (error) {
    return res.status(500).json({ error: error.message });
  }
};

 

Проблема в том, что состояние пользователя не сохраняется при обновлении, но у меня все еще есть json webtoken в моем локальном хранилище, и это проблема, когда я делаю запросы post и даже регистрируюсь, поскольку я перенаправляю на домашнюю страницу и теряю состояние пользователя. Любая помощь будет оценена!

Из ваших тегов я заметил, что вы используете React , поэтому решение простое!

у вас может быть GlobalAuthManager контекст для вашего приложения, который будет обертывать все компоненты на самом высоком уровне! после <React.strictMode> , как показано ниже:

 
<React.StrictMode>
  <GlobalAuthManager.Provider value={{authData}}>
    <App />
  </GlobalAuthManager.Provider>
</React.StrictMode>

 

Как вы можете догадаться, это будет контекст! это предоставит вам ваши пользовательские данные для всех ваших компонентов!

Шаблон:

1. Сохранить токен:

когда ваш пользователь войдет в ваше приложение, вы получите токен (в своем ответе или в заголовке ответа), вам нужно сохранить значение токена в localstorage или, что еще лучше, в хранилище файлов cookie (об этом есть много статей, почему), одна из них здесь.

2. иметь /getUserData конечную точку в серверной части:

вам необходимо иметь /getUserData конечную точку в бэкэнде для повторного просмотра ваших пользовательских данных на основе токена

3. вызовите /getUserData монтирование приложения:

перед каждой вещью в вашем приложении вам нужно вызвать эту конечную точку, если вы найдете токен в localstorage или хранилище файлов cookie. так что, если вы запустите это в своей componnetDidMount или useEffect(() => { ... }, []) , это сработает!

4. храните свои пользовательские данные и состояние в контексте:

после того, как вы вызвали /getUserData и если у вас был действительный токен (я имею в виду токен с истекшим сроком действия или не прерванный и отредактированный токен), вы получите пользовательские данные, и что вам нужно сделать, так это сохранить это в вашем GlobalAuthManager и предоставить это в свой глобальный компонент приложения!

после этого вам будут доступны ваши пользовательские данные, которые вы можете выбрать, чтобы показать кнопку входа или регистрации на панели навигации или отключить / включить раздел комментариев, например, на основе ваших пользовательских данных!

Подводя итог: итак, ключ в том, что у вас должен быть a GlobalAuthManager только для одной цели, чтобы перед каждой вещью он запускался на верхнем уровне вашего приложения и получал ваши пользовательские данные на основе предоставленного токена из localstorage или хранилища файлов cookie!

после этого вы можете управлять состоянием своего приложения в зависимости от того, вошел ваш пользователь в систему или нет!