Я построил систему входа в систему с HTML, CSS и JavaScript, когда я сделал изучение студенческого портала JavaScript. Я хотел бы поделиться этой системой с вами, так как кажется, хорошо работает.
Как работает система
Система идет так:
- Пусть пользователь войдит на странице входа
- После входа в систему храните информацию о компании в
LocalStorage
Отказ - Перенаправить на страницу контента
- Когда студенческие земли на странице
- Проверьте, может ли студент может получить доступ к странице
- Если да, позвольте студенту ввести
- Если нет, перенаправить на страницу входа
Вход в систему
Студенты могут войти в курс со своим адресом электронной почты и паролем.
Когда они отправляют форму, я отправляю свою электронную почту и пароль на мой сервер через запрос на почту. Вот что выглядит запрос:
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) }
Я снова храним уровень доступа, когда токен подтвержден. Это позволяет мне:
- Помешать студентам подделать их
LocalStorage
(и получить доступ к урокам, которые они не должны иметь) - Обновить доступ студента автоматически, как только они будут обновлены до более высокого уровня
Две птицы с одним камнем!
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.