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: `
    <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...'))

Ответы (0 шт):