Создание системы входа в систему с HTML, CSS и JavaScript

Автор оригинала: Zell Liew.

Я построил систему входа в систему с HTML, CSS и JavaScript, когда я сделал изучение студенческого портала JavaScript. Я хотел бы поделиться этой системой с вами, так как кажется, хорошо работает.

Как работает система

Система идет так:

1. Пусть пользователь войдит на странице входа
2. После входа в систему храните информацию о компании в LocalStorage Отказ
3. Перенаправить на страницу контента
4. Когда студенческие земли на странице
5. Проверьте, может ли студент может получить доступ к странице
6. Если да, позвольте студенту ввести
7. Если нет, перенаправить на страницу входа

Вход в систему

Студенты могут войти в курс со своим адресом электронной почты и паролем.

Когда они отправляют форму, я отправляю свою электронную почту и пароль на мой сервер через запрос на почту. Вот что выглядит запрос:

async function basiclogin (email, password) {
  const response = await zlFetch.post(loginEndpoint, {
    auth: {
      username: email,
      password: password
    },
    body: { /*...*/ }
  })
}

zlfetch Является ли библиотека, которую я создал, чтобы сделать API для использования API для использования. Вы можете узнать больше о zlfetch здесь Отказ auth Опция трансформирует Имя пользователя и пароль в базовый заголовок аутентификации.

Мой сервер использует JSON WEB TOKENS (JWT) для аутентификации пользователей. Он отправляет обратно токен JWT. Token JWT – это длинная строка, которая выглядит так:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaXJzdE5hbWUiOiJaZWxsIiwiZW1haWwiOiJ6ZWxsd2tAZ21haWwuY29tIiwiaWF0IjoxNTc3ODYzNzc3LCJleHAiOjE1ODA0NTU3Nzd9.i3rOwqV1Bc-JEAaxT7lHZHUlDuFf9ADVP7qjy50WqT0

Этот токен действует как учетные данные для будущих логинов. Я сохраняю этот токен внутри LocalStorage Поэтому я могу войти в систему студентов автоматически.

async function basiclogin (email, password) {
  const response = await zlFetch.post(/*...*/)
  const { token } = response.body
  
  localStorage.setItem('token', token)
}

Проверка, если студент вошел в систему

Чтобы проверить, вошел ли студент, я проверяю LocalStorage для токена. Если LocalStorage не имеет токен Я знаю, что студент не вошел в систему.

async function isLoggedIn () {
  const token = store.get('token')
  if (!token) return false
}

Если студент не вошел в систему, я перенаправляю их на страницу входа.

async function autoRedirect () {
  const validLogin = await isLoggedIn()
  if (!validLogin && location.pathname !== '/login/') redirect('/login')
  if (validLogin && location.pathname === '/login/') redirect('/')
}

Если LocalStorage Имеет токен, мне все еще нужно проверить действительность этого токена. Для этого я отправляю еще один запрос на почту на мой сервер.

async function isLoggedIn () {
  // ...
  // Checks validity of token
  const response = await zlFetch.post(loginEndpoint, {
    auth: token,
    body: { course: 'learn-javascript' }
  })
}

Если ответ успешен, мой сервер возвращает другой токен с новой датой истечения срока годности. Этот новый токен позволяет студентам оставаться вошедшим в систему в течение более длительного периода.

async function isLoggedIn () {
  // ...
  // Saves token into localStorage again
  const { token } = response.body
  localStorage.setItem('token', token)

  return true
}

Обновление уровня доступа студента

Кроме того, токен Я храним студенческий «уровень доступа» внутри LocalStorage также. Этот «уровень доступа» определяет, какие уроки могут получить учащийся.

Студенты могут получить доступ к этим урокам Студенты не могут получить доступ к этим урокам

Я храним этот уровень доступа, когда студент вступает в первый раз.

function basiclogin (email, password) {
  const response = await zlFetch.post(/*...*/)
  const { token, user } = response.body
  // ...

  // user contains accessLevel
  localStorage.setItem('user', user)
}

Я снова храним уровень доступа, когда токен подтвержден. Это позволяет мне:

1. Помешать студентам подделать их LocalStorage (и получить доступ к урокам, которые они не должны иметь)
2. Обновить доступ студента автоматически, как только они будут обновлены до более высокого уровня

Две птицы с одним камнем!

function isLoggedIn () {
  // ...
  const { token, user } = response.body
  localStorage.setItem('user', user)
}

Выход из строя

Это просто выйти из системы. Мы просто должны очистить предметы, которые мы размещены в LocalStorage Отказ

function logout () {
  localStorage.removeItem('token')
  localStorage.removeItem('user')
}

Предотвращение доступа для студентов без JavaScript

Этот курс построен со статическим генератором сайта. Каждый урок является простой HTML-файлом. Студенты могут обойти слой аутентификации и прочитать HTML напрямую, если они выключают JavaScript.

Это не должно происходить.

Чтобы люди отказывали от своего JavaScript для просмотра уроков, я добавил No-JS класс к элементу HTML.

...

Я удаляю это No-JS класс, когда есть JavaScript.

document.documentElement.classList.remove('no-js')

И я скрываю основной контент, если пользователь выключил JavaScript.

/* Disallow access if there's no JavaScript */
.no-js main {
  display: none !important;
}

Сообщение для включения JavaScript

Студенты, которые пытаются получить доступ к порталу курса без JavaScript, увидит пустую страницу. Они могут запутаться и думать, что страница не загружалась.

Мне нужно рассказать этим студентам включить JavaScript, поэтому я добавил тег.

Это весь процесс входа в систему!

Спасибо за прочтение. Эта статья была первоначально опубликована на мой блог Отказ Подпишись на Моя рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим разработчиком Frontend.