я решил для обучения написать небольшой сайт. Я набросал страничку авторизации. На сервере будет использоваться Node.js. После того, как я ввожу логин и пароль нажимается кнопка входа. Отправляется запрос login на сервер, на сервере проверяются логин и пароль, если логин и пароль совпадают - генерируется токен и отправляется клиенту. После этого нужно выполнить запрос home, передать токен на сервер. Если он есть в массиве tokens, то должна открыться ссылка http://localhost:3000/home. И там должно быть содержимое home.html. Подскажите пожалуйста, как это сделать?
Фронтэнд:
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
Vue.component('loader', {
template: `
<div style="display: flex;justify-content: center;align-items: center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
`
})
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', {login: login,
password: hash})
if (token == "WA") {
alert('Wrong login/password')
}
else {
const a = await request(`/home`, 'post', {token: token})
//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) {
console.log(e.message)
}
Бэкенд: 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...'))
JWT
токены для авторизации и не создавайте себе проблемы. Можно еще прикрутитьpassportjs
, но это для соц. авторизации больше подходит.