Правильно ли я делаю маршрутизацию клиента?

Question

есть точка входа index.html, который запускает app.js . Он, в свою очередь, проверяет авторизован ли человек, и в зависимости от ответа перенаправляет на страницу либо на страницу авторизации, либо в профиль.

index.html:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>URTK Airport Panel</title>
    <link rel="stylesheet" href="src/index.css">
    <script type="module" src="src/app.js" defer></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

app.js:

import axios from 'axios';

// Функция для загрузки страницы с помощью Axios
async function loadPageWithAxios(href) {
    try {
        const response = await axios.get(href);
        return response.data;
    } catch (error) {
        console.error('Ошибка при загрузке страницы:', error);
        throw error;
    }
}

function loadPage(url) { 
    location.replace(url); 
}

import AuthPage from './pages/AuthPage/AuthPage.html';
import Page1 from './pages/AuthPage/test.html'
 


function renderApp() {
    const isAuthorized = !!localStorage.getItem('token') &&
        !!localStorage.getItem('fullName') &&
        !!localStorage.getItem('admin-type');

    // Получаем корневой элемент для рендеринга
    const rootElement = document.getElementById('root');

    // Определяем маршрутизацию в зависимости от авторизации
    let routing;
    if (isAuthorized) {
        loadPage(Page1)
        // loadPageWithAxios('src/test.html')
        //     .then(html => {
        //         rootElement.innerHTML = html;
        //     })
        //     .catch(error => {
        //         console.error('Ошибка при загрузке страницы:', error);
        //     });
    } else {
        loadPage(AuthPage);
        // loadPageWithAxios(AuthPage)
        //     .then(html => {
        //         rootElement.innerHTML = html;
        //     })
        //     .catch(error => {
        //         console.error('Ошибка при загрузке страницы:', error);
        //     });
    }
}

window.onload = renderApp;

Раньше я использовал функцию loadPageWithAxios(закомменченные части) и тогда не работали другие js скрипты, прописанные на соответствующих страницах(то есть, например, открывалась страница AuthPage и ни одна кнопка не работала). Потом я сделал функцию loadPage(url) и все стало работать.

Скажите адекватно ли это для фронтенда, законно ли, безопасно ли? Я еще учусь и в этом проекте необходимо сделать клиент-серверное приложение, используя максимум html, css, JavaScript, jQuery; и вопрос стоит в корректной маршрутизации на стороне клиента

БЛОГ НА HUSL

Правильно ли я делаю маршрутизацию клиента?

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