JS. Авторизация и переход на следующую страницу
я решил для обучения написать небольшой сайт. Я набросал страничку авторизации. На сервере будет использоваться Node.js. После того, как я ввожу логин и пароль нажимается кнопка входа. Отправляется запрос login на сервер, на сервере проверяются логин и пароль, если логин и пароль совпадают — генерируется токен и отправляется клиенту. После этого нужно выполнить запрос home, передать токен на сервер. Если он есть в массиве tokens, то должна открыться ссылка http://localhost:3000/home. И там должно быть содержимое home.html. Подскажите пожалуйста, как это сделать? Фронтэнд:
import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js' Vue.component('loader', < template: ` ` >) new Vue(< el: '#app', data() < return < loading: false, form: < name: '', value: '' >, contacts: [] > >, computed: < canCreate() < return this.form.value.trim() && this.form.name.trim() >>, methods: < async Login() < let login = document.getElementById("login").value; let password = document.getElementById("pass").value; let hash = sha256(password + login) const token = await request(`/api/login`, 'POST', ) if (token == "WA") < alert('Wrong login/password') >else < const a = await request(`/home`, 'post', ) //document.location.href = "http://localhost:3000/home"; console.log(a) > > > /*, async mounted() < this.loading = true this.contacts = await request('/api/contacts') this.loading = false >*/ >) async function request(url, method = 'GET', data = null) < try < const headers = <>let body if (data) < headers['Content-Type'] = 'application/json' body = JSON.stringify(data) >const response = await fetch(url, < method, headers, body >) return await response.json() > catch (e)
Бэкенд: app.js
const express = require('express') var auth = require('./authorization') const path = require('path') const app = express() app.use(express.json()) tokens = [] app.post('/api/login', (req, res) => < let a = auth.auth(req.body["login"], req.body["password"]) tokens.push(a) //console.log(tokens) res.status(200).json(a); >) app.use(express.static(path.resolve(__dirname, 'client'))) app.post('/home', (req, res) => < console.log(req.body["token"]) res.sendFile(path.resolve(__dirname, 'client', 'home.html')) >) app.get('*', (req, res) => < res.sendFile(path.resolve(__dirname, 'client', 'index.html')) >) app.listen(3000, () => console.log('Server has been started on port 3000. '))
Авторизация — JS: Express
Авторизация — это предоставление определённому лицу или группе лиц прав на выполнение определённых действий; а также процесс проверки (подтверждения) данных прав при попытке выполнения этих действий.
Ситуация, в которой термины используются неправильно, довольно распространена. Авторизация относится к списку таких терминов. Обычно ей называют аутентификацию. Об этом всегда стоит помнить, но мир (как минимум русскоязычный) уже не изменить.
Рассмотрим простой пример с использованием авторизации, удаление поста.
app.delete('/posts/:id', (req, res, next) => if (res.locals.currentUser.isGuest()) const error = new AccessDeniedError(); return next(error); > state.posts = state.posts.filter(post => !(post.id.toString() === req.params.id)); res.redirect('/posts'); >);
Удалить пост может только залогиненный пользователь. Все остальные (гости) должны получить в ответ 403 forbidden , код, который означает, что произошел отказ в доступе. В более сложных случаях нужно проверять, что пост может удалить только его автор. Любой сайт, сложнее чем сайт-визитка, содержит в себе множество проверок на допустимость тех или иных действий, что может привести к очень большому дублированию проверок по всем обработчикам. Разберём, как этого можно избежать.
Route Middlewares
// a middleware sub-stack shows request info for any // type of HTTP request to the /user/:id path router.use('/user/:id', (req, res, next) => console.log('Request URL:', req.originalUrl); next(); >, (req, res, next) => console.log('Request Type:', req.method); next(); >);
Express позволяет указывать любое количество мидлвар для одного и того же маршрута. Для этого можно передать любое количество аргументов (являющихся мидлварами) в функцию use . Этим фактом мы и воспользуемся.
const requiredAuth = (req, res, next) => if (res.locals.currentUser.isGuest()) return next(new AccessDeniedError()); > next(); >; app.delete('/posts/:id', requiredAuth, (req, res) => state.posts = state.posts.filter(post => !(post.id.toString() === req.params.id)); res.redirect('/posts'); >);
В примере выше определена мидлвара requiredAuth , которую можно подключать к любому маршруту. Она проверяет, залогинен ли пользователь или нет, если нет, то дальше по цепочке передаётся ошибка. Как мы уже знаем, это приводит к тому, что начинают выполняться
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
#8 — Авторизация и выход из учетной записи
В лекции мы создадим форму авторизации, а также научимся авторизовывать пользователя в системе. Помимо авторизации мы разработаем функционал для выхода пользователя из личного кабинета.
Видеоурок
Создание авторизации и выход из учетной записи реализуется аналогично с регистрацией пользователя в системе. Вам также необходимо создать сервис, в котором прописать функции что будут передавать данные на серверную часть приложения. Подобный принцип мы уже рассматривали в предыдущем уроке, поэтому внимания на этом заострять не будет.
Локальное хранилище
Локальное хранилище это особое место в браузере, с которым мы можем работать и в котором мы можем хранить данные. Локальное хранилище в Node JS сравнимо с сессиями или куки в таком языке как PHP.
Чтобы обратиться к локальному хранилищу необходимо просто прописать localStorage и далее через функцию setItem установить значение в него. Пример:
localStorage.setItem('ключ', 'значение')
Для того чтобы получить ключ пропишите функцию getItem:
localStorage.getItem('ключ')
И для того чтобы удалить значение из локального хранилища пропишите:
localStorage.removeItem('ключ')
Также можно очистить все значения сразу же при помощи функции clear():
localStorage.clear()
В локальном хранилище можно хранить только строки, поэтому любые объекты или любые JSON файлы необходимо приводить к формату строки.
Все значения что есть в локальном хранилище можно просмотреть через браузер. В Google Chrome вы можете зайти в консоль разработчика и далее перейти на вкладку Resources:
#4 — Авторизация через Passport.js
Для авторизации пользователя в системе мы будем использовать промежуточное ПО Passport.js. Вы научитесь работать с JsonWebToken, а также реализуете авторизацию пользователя на сайте.
Видеоурок
Библиотека Passport JS это сторонние ПО, что служит для реализации системы авторизации пользователя на вашем веб сайте. Passport JS это библиотека что призвана работать исключительно с Node JS проектами.
Для создания авторизации на сайте вы можете использовать одну из множества доступных стратегий авторизации пользователя. Посмотреть все стратегии можно на их официальном сайте .
Чем так хорошо Passport JS?
Passport JS в первую очередь обеспечивает защищенное подключение пользователя к вашему сайту. Тем самым авторизация происходит корректно и никто, кроме действительно зарегистрированных пользователей не сможет войти к вам на сайт.
Также Passport JS позволяет создать защищенные разделы сайта, то есть те разделы, доступ к которым будет обеспечен лишь после авторизации пользователя на сайте.
app.get('/profile', passport.authenticationMiddleware(), renderProfile)