Как сделать проверку на авторизацию?

Question

[NicknameIsNotExist]

Имеется сайт с JWT авторизацией, как правильно проверять авторизацию? Если просто проверять авторизацию по наличию Cookie, то туда можно добавить любую информацию. Появляется вопрос - как эту информацию валидировать? Я попытался при каждой перезагрузке страницы отправлять запрос на сервер с токеном, и этот вариант казалось бы неплохой, но поизучав другие сайты, я не заметил у них такого же принципа проверки авторизации, при этом при изменении токена в Cookie авторизация слетает.

Answer 1

[Елена]

jwt сохраняется в localstorage при авторизации, а каждое посещение проверяется на наличие jwt

function App() {
  const [auth, setAuth] = useState(!!localStorage.getItem('jwt'));

  return (
    <Auth.Provider value={[auth, setAuth]}>
      {auth && <Authorized />}
      {!auth && <Unauthorized />}
    </Auth.Provider>
  )
}

Comments

[Елена]

NicknameIsNotExist, то что в стораже хранится нельзя подменить, т.к. он хранится от конкретного домена

[Елена]

NicknameIsNotExist, не может пользователь изменить localstorag, у людей нет прямого доступа к хранилищу браузера. Вы можете только удалить все из хранилища своего браузера, почистив кеш. Если вы думаете, что если добавите в хранилище ключ "jwt" со своего адреса, а потом зайдете на сайт, где идет проверка по этому ключу, его там не будет.

Answer 2

[Константин Артюшкевич]

Нормальный вариант отправлять запрос на сервер при первом рендере приложения. Если сервер вернул 401, то отправляем на форму аутентификации. Иначе -- продолжаем пользоваться. Если же пользователь сам подменит как-то Cookie, то при любом действии, требующим запрос на бекенд, он будет выведен на чистую воду. И нет смысла как-то париться и отслеживать изменения куки. Ведь если пользователь ничего не отправляет на бек, то он ничего в системе и не меняет получается.