Простая аутентификация пользователя c использованием vue.js и json-файла?

Question

    methods: {
      async submitForm(){
          const {login, pass} = this
          try {
            const response =  await axios.get("/data.json")
            response.data.find((item)=>{
              if(item.login == login && item.password == pass){
                  return (
                    localStorage.setItem('token', 'token'),
                    this.$router.push('/search')
                  )
              }else{
                alert('пароль или логин не совпадают')
              }
            })
          } catch (error) {
            console.log(error)
          }
      }, 
    }

С сервера приходит:

[
    {
        "login": "admin",
        "password": "admin"
    },
    {
        "login": "1",
        "password": "1"
    }

]

Подскажите,пожалуйста,на сколько правилен такой подход(про безопасность понимаю!)?

Answer 1

Тестовый сервер и клиент чтобы минимально воспроизвести ситуацию авторизации посредством отправки GET запроса на сервер.

Чтобы запустить сервер необходимо:

Скачать NodeJS с официального сайта.
Создать файл server.js
Поместить код ниже в файл.
Открыть командную строку в директории где расположен файл server.js
Прописать node server в командную строку
Дождаться успешного сообщения о запуске сервера
Запустить код клиент части
Получить ответ на клиент части

Node server:

const http = require("http");
const url = require("url");

const users = [
    { login: "admin", password: "admin" },
    { login: "user", password: "user" }
];

const server = http.createServer();
server.listen(8081, () => console.log("Сервер запущен: http://127.0.0.1:8081"));

const returnResponse = (response, code = 200) => {
    response.writeHead(code, {
        "Access-Control-Allow-Headers": "*",
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json; charset=utf-8"
    });
    response.end();
};

const checkUserData = (login, password) => 
    !!users.find(user => user.login === login && user.password === password);

const currentDate = () => new Date().toISOString().substring(0, 19).replace("T", " ");

server.on("request", (request, response) => {
    const params = url.parse(request.url, true).query;

    if (
        Object.keys(params).length === 0 ||
        !"login" in params ||
        !"password" in params
    )
        return returnResponse(response, 204);

    if (!checkUserData(params.login, params.password))
        return returnResponse(response, 401);

    console.log(`[${currentDate()}] Пользователь ${params.login} авторизовался.`);

    return returnResponse(response);
});

JS Client:

const data = {
  params: {
    login: 'admin',
    password: 'admin'
  }
}

axios.get('http://127.0.0.1:8081', data)
  .then((response) => {
    switch (response.status) {
      case 200:
        alert('Данные подтверждены');
        break;
      case 204:
        alert('Недостаточно данных');
        break;
      case 401:
        alert('Данные не верны');
        break;
    }
  }).catch((err) => {
    alert('Ошибка');
    console.log(err);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

UPD: Не силен в бэкенде, собрал минимальный вариант без express'a из документации NodeJS.

БЛОГ НА HUSL

Простая аутентификация пользователя c использованием vue.js и json-файла?

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

Node server:

JS Client: