Issue with Unauthorized Access Redirection in Login System

Wappler General How To
#1

Hello @Teodor , @patrick

I have prepared a project in which, of course, users can log in using their username and password. However, I have noticed an issue that has occurred.

I have set up a redirection to the login page in case of unauthorized access in the server action and router, but I have encountered a problem where the page loads even if there is an unauthorized access in the router, and then it redirects to the login page after the page has loaded completely. This means that the person who wants to access the page first sees the page and then goes to the login page.

What I want is for the user to be directed straight to the login page if there is an authorization issue, without the page loading at all. I am not sure if this is a bug or not. If I provide you with the page link and user credentials, could you check this issue for me?

#2

You can just use the security provider restrict on the page or in NodeJS specify server connect actions on the route to restrict the route.

So directly a redirect is done and the page is never fully loaded.

#3

hi @George ,

I am using PHP. so it is difficult for me to switch back to nodejs. yes I am already using security enforcer.

#4

Add the preloader component to the pages Serhat. That way on render the preloader will be displayed before the page content, and will redirect to the login before any data is displayed.

#5

If you are using security provider enforcer on your php page, then the page won’t be loaded at all for unauthorized users.

1 Like
#6

If there is a problem, it is always better to solve it. That’s why I’m waiting for the team to check.

1 Like
#7

I sent you a message, do you have a chance to check?

#8

@George,

marked as solution but now it is already in this situation and first the page loads and then the page redirects to login. So it shouldn’t be this way. There may be a bug here, I suggest you check it again.

As you can see below, there is already a code blog on the page ?

<?php
require('dmxConnectLib/dmxConnect.php');

$app = new \lib\App();

$app->exec(<<<'JSON'
{
	"steps": [
		"Connections/mappsTvDB",
		"SecurityProviders/security",
		{
			"module": "auth",
			"action": "restrict",
			"options": {"loginUrl":"login.html","forbiddenUrl":"login.html","provider":"security"}
		}
	]
}
JSON
, TRUE);
?>
<!DOCTYPE html>

<html lang="en" class="light-style layout-navbar-fixed layout-menu-fixed" dir="ltr" data-theme="theme-default" data-assets-path="../../assets/" data-template="vertical-menu-template">

<head>
  <meta name="ac:route" content="/">
  <base href="/">
  <script src="dmxAppConnect/dmxAppConnect.js"></script>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

  <title>MAPPS | DIGITAL SYNC</title>


  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
  <!-- WAPPLER BOOTSTRAP -->
  <!-- Icons -->
  <link rel="stylesheet" href="../../assets/vendor/fonts/fontawesome.css" />
  <link rel="stylesheet" href="../../assets/vendor/fonts/tabler-icons.css" />
  <link rel="stylesheet" href="../../assets/vendor/fonts/flag-icons.css" />

  <!-- Core CSS -->
  <link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
  <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="../../assets/css/demo.css" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />


  <!-- Vendors CSS -->
  <link rel="stylesheet" href="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-waves.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/typeahead-js/typeahead.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/apex-charts/apex-charts.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/bs-stepper/bs-stepper.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/select2/select2.css" />
  <!-- Page CSS -->

  <!-- Helpers -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="js/moment.js/2/moment-with-locales.min.js"></script>
  <script src="../../assets/vendor/js/helpers.js"></script>

  <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
  <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
  <script src="../../assets/vendor/js/template-customizer.js"></script>
  <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
  <script src="../../assets/js/config.js"></script>

  <script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
  <script src="dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
  <link rel="stylesheet" href="dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
  <script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
  <script src="dmxAppConnect/dmxBootstrap5Alert/dmxBootstrap5Alert.js" defer></script>
  <script src="dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer></script>
  <script src="dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer></script>
  <script src="dmxAppConnect/dmxBootstrap5PagingGenerator/dmxBootstrap5PagingGenerator.js" defer></script>
  <link rel="stylesheet" href="dmxAppConnect/dmxValidator/dmxValidator.css" />
  <script src="dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
  <script src="dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
  <script src="dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
  <link rel="stylesheet" href="dmxAppConnect/dmxNotifications/dmxNotifications.css" />
  <script src="dmxAppConnect/dmxNotifications/dmxNotifications.js" defer></script>
  <script src="dmxAppConnect/dmxBootstrap5Collapse/dmxBootstrap5Collapse.js" defer></script>


  <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.css" />
  <script src="https://unpkg.com/@fullcalendar/core@4.4.2/main.min.js" defer></script>
  <script src="https://unpkg.com/@fullcalendar/core@4.4.2/locales-all.min.js" defer></script>
  <script src="https://unpkg.com/@fullcalendar/interaction@4.4.2/main.min.js" defer></script>
  <script src="https://unpkg.com/@fullcalendar/daygrid@4.4.2/main.min.js" defer></script>
  <script src="dmxAppConnect/dmxCalendar/dmxCalendar.js" defer></script>
  <script src="https://unpkg.com/@fullcalendar/google-calendar@4.4.2/main.min.js" defer></script>
  <link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
  <script src="dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer></script>
  <link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
  <script src="dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer></script>
  <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/daygrid@4.4.2/main.min.css" />
  <link rel="stylesheet" href="https://unpkg.com/@fullcalendar/list@4.4.2/main.min.css" />
  <script src="https://unpkg.com/@fullcalendar/list@4.4.2/main.min.js" defer></script>
  <script src="dmxAppConnect/dmxFormRepeat/dmxFormRepeat.js" defer></script>
</head>

<body id="index" is="dmx-app">
  <dmx-serverconnect id="cikis" url="dmxConnect/api/Login/kullanici_cikis.php" noload dmx-on:success="browser1.goto('login')"></dmx-serverconnect>
  <dmx-query-manager id="query1"></dmx-query-manager>
  <dmx-serverconnect id="kullaniciBilgileri" url="dmxConnect/api/Login/kullanici_bilgileri.php" dmx-on:unauthorized="cikis.load({})"></dmx-serverconnect>
  <div is="dmx-browser" id="browser1"></div>
  <!-- Layout wrapper -->
  <div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
      <!-- Menu -->
      <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
        <div class="app-brand demo">
          <a href="./" class="app-brand-link">
            <span class="app-brand-logo demo">
              <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z" fill="#7367F0" />
                <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd" d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z" fill="#161616" />
                <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd" d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z" fill="#161616" />
                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z" fill="#7367F0" />
              </svg>
            </span>
            <span class="app-brand-text demo menu-text fw-bold">Mapps Sync</span>
          </a>

          <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
            <i class="ti menu-toggle-icon d-none d-xl-block ti-sm align-middle"></i>
            <i class="ti ti-x d-block d-xl-none ti-sm align-middle"></i>
          </a>
        </div>

        <div class="menu-inner-shadow"></div>

        <ul class="menu-inner py-1">
          <!-- Dashboards -->
          <li class="menu-item active open">
            <a href="javascript:void(0);" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons ti ti-smart-home"></i>
              <div data-i18n="Göstergeler">Göstergeler</div>
              <div class="badge bg-label-primary rounded-pill ms-auto">3</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item" dmx-class:active="browser1.location.pathparts[0]=='yerleskeler' ? true : false">
                <a href="./yerleskeler" class="menu-link">
                  <div>Yerleskeler</div>
                </a>
              </li>
              <li class="menu-item" dmx-class:active="browser1.location.pathparts[0]=='odalar' ? true : false">
                <a href="./odalar" class="menu-link">
                  <div>Oda İşlemleri</div>
                </a>
              </li>
              <li class="menu-item" dmx-class:active="browser1.location.pathparts[0]=='ekranlar' ? true : false">
                <a href="./toplantilar" class="menu-link">
                  <div data-i18n="Toplantılar">Toplantılar</div>
                </a>
              </li>
              <li class="menu-item" dmx-class:active="browser1.location.pathparts[0]=='ekran-listesi' ? true : false">
                <a href="./ekran-listesi" class="menu-link">
                  <div data-i18n="Ekranlar Listesi">Ekran Listesi</div>
                </a>
              </li>
              <li class="menu-item" dmx-class:active="browser1.location.pathparts[0]=='' ? true : false">
                <a href="./" class="menu-link">
                  <div>Kullanıcılar</div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </aside>
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->
        <nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" id="layout-navbar">
          <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
            <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
              <i class="ti ti-menu-2 ti-sm"></i>
            </a>
          </div>
          <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
            <!-- Search -->
            <div class="navbar-nav align-items-center">
              <div class="nav-item navbar-search-wrapper mb-0">
                <a class="nav-item nav-link search-toggler d-flex align-items-center px-0" href="javascript:void(0);">
                  <i class="ti ti-search ti-md me-2"></i>
                  <span class="d-none d-md-inline-block text-muted">Ara (Ctrl+/)</span>
                </a>
              </div>
            </div>
            <!-- /Search -->

            <ul class="navbar-nav flex-row align-items-center ms-auto">
              <!-- Language -->
              <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                  <i class="fi fi-tr fis rounded-circle me-1 fs-3"></i>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a class="dropdown-item" href="javascript:void(0);" data-language="tr">
                      <i class="fi fi-tr fis rounded-circle me-1 fs-3"></i>
                      <span class="align-middle">Türkçe</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!--/ Language -->

              <!-- Style Switcher -->
              <li class="nav-item me-2 me-xl-0">
                <a class="nav-link style-switcher-toggle hide-arrow" href="javascript:void(0);">
                  <i class="ti ti-md"></i>
                </a>
              </li>
              <!--/ Style Switcher -->

              <!-- User -->
              <li class="nav-item navbar-dropdown dropdown-user dropdown">
                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                  <div class="avatar avatar-online">
                    <img src="../../assets/img/avatars/1.png" alt class="h-auto rounded-circle" />
                  </div>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a class="dropdown-item" href="pages-account-settings-account.html">
                      <div class="d-flex">
                        <div class="flex-shrink-0 me-3">
                          <div class="avatar avatar-online">
                            <img src="../../assets/img/avatars/1.png" alt class="h-auto rounded-circle" />
                          </div>
                        </div>
                        <div class="flex-grow-1">
                          <span class="fw-semibold d-block">{{kullaniciBilgileri.data.query.ok_ad_soyad}}</span>
                          <small class="text-muted">{{(kullaniciBilgileri.data.query.ok_durum == 1) ? 'Aktif':'Pasif'}}</small>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li>
                    <div class="dropdown-divider"></div>
                  </li>
                  <li>
                    <a class="dropdown-item" href="pages-profile-user.html">
                      <i class="ti ti-user-check me-2 ti-sm"></i>
                      <span class="align-middle">Profil</span>
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="pages-account-settings-account.html">
                      <i class="ti ti-settings me-2 ti-sm"></i>
                      <span class="align-middle">Ayarlar</span>
                    </a>
                  </li>

                  <li>
                    <div class="dropdown-divider"></div>
                  </li>
                  <li>
                    <a class="dropdown-item" href="pages-help-center-landing.html">
                      <i class="ti ti-lifebuoy me-2 ti-sm"></i>
                      <span class="align-middle">Yardım</span>
                    </a>
                  </li>
                  <li>
                    <div class="dropdown-divider"></div>
                  </li>
                  <li>
                    <a class="dropdown-item" href="javascript:void(0)" dmx-on:click="cikis.load({})">
                      <i class="ti ti-logout me-2 ti-sm"></i>
                      <span class="align-middle">Çıkış</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!--/ User -->
            </ul>
          </div>

          <!-- Küçük ekranlar için ara -->
          <div class="navbar-search-wrapper search-input-wrapper d-none">
            <input type="text" class="form-control search-input container-xxl border-0" placeholder="Ara..." aria-label="Ara..." id="search" />
            <i class="ti ti-x ti-sm search-toggler cursor-pointer"></i>
          </div>
        </nav>

        <!-- / Navbar -->

        <!-- Content -->
        <div is="dmx-route" path="/" url="spa/main.php" id="main" exact="true" dmx-on:unauthorized="browser1.goto('login')" dmx-on:forbidden="browser1.goto('login')" dmx-on:notfound="browser1.goto('login')"></div>
        <div is="dmx-route" path="/ekranlar" url="spa/ekranlar.html" id="ekranlar" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/yerleskeler" url="spa/yerleskeler.html" id="yerleskeler" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/odalar" url="spa/odalar.html" id="odalar" dmx-on:show="scOdalar.load({},true)" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/ekran-listesi" url="spa/ekran_listesi.html" id="ekran_listesi" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/toplantilar" url="spa/toplantilar.html" id="toplantilar" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/ekranekle/:yerleskeid/:odaid/:odatipid/:rowid" url="spa/ekran_ekle_v2.html" id="ekranekle" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/ekran-guncelle/:yerleskeid/:ekranid/:odatipi" url="spa/ekran-guncelle.html" id="ekran_guncelle" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/oda-kayit/:yerleskeid" url="spa/oda_ekle.html" id="odaekle" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/oda-kayit-guncelle/:odaid" url="spa/oda_guncelle.html" id="odakayitguncelle" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/ekran_ekle_/:yerleskeid/:odaid/:odatipid/:rowid" url="spa/ekranekle_v3.html" id="ekraneklevv" dmx-on:unauthorized="browser1.goto('login')"></div>
        <div is="dmx-route" path="/ekran_detay/:yerleskeid/:ekranid/:odatipi" url="spa/ekran_detay.html" id="ekran_detayi" dmx-on:unauthorized="browser1.goto('login')"></div>
        <!-- / Content -->
        <!-- Footer -->
        <footer class="content-footer footer bg-footer-theme">
          <div class="container-xxl">
            <div class="footer-container d-flex align-items-center justify-content-between py-2 flex-md-row flex-column">
              <div>
                ©
                <script>
                  document.write(new Date().getFullYear());
                </script>
                , made with ❤️ by <a href="https://turkmobil.com.tr" target="_blank" class="fw-semibold">Turkmobil</a>
              </div>
              <div>
                <a href="https://turkmobil.com.tr/" class="footer-link me-4" target="_blank">Lisans</a>

                <a href="https://turkmobil.com.tr/" target="_blank" class="footer-link me-4">Yardım X Destek</a>
              </div>
            </div>
          </div>
        </footer>
        <!-- / Footer -->

        <div class="content-backdrop fade"></div>
      </div>
      <!-- Content wrapper -->
    </div>
    <!-- / Layout page -->
  </div>

  <!-- Overlay -->
  <div class="layout-overlay layout-menu-toggle"></div>
  <!-- Drag Target Area To SlideIn Menu On Small Screens -->
  <div class="drag-target"></div>

  <!-- / Layout wrapper -->

  <!-- Core JS -->
  <!-- build:js assets/vendor/js/core.js -->
  <script src="../../assets/vendor/libs/popper/popper.js"></script>
  <script src="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
  <script src="../../assets/vendor/libs/node-waves/node-waves.js"></script>
  <script src="../../assets/vendor/libs/hammer/hammer.js"></script>
  <script src="../../assets/vendor/libs/i18n/i18n.js"></script>
  <script src="../../assets/vendor/libs/typeahead-js/typeahead.js"></script>
  <script src="../../assets/vendor/js/menu.js"></script>
  <!-- Vendors JS -->
  <script src="../../assets/vendor/libs/apex-charts/apexcharts.js"></script>
  <script src="../../assets/vendor/libs/bs-stepper/bs-stepper.js"></script>
  <script src="../../assets/vendor/libs/select2/select2.js"></script>
  <!-- Main JS -->
  <script src="../../assets/js/main.js"></script>
  <!-- Page JS -->
  <script src="../../assets/js/form-wizard-icons.js"></script>
  <script src="../../assets/js/dashboards-crm.js"></script>
  <script src="bootstrap/5/js/bootstrap.min.js"></script>
</body>

</html>

I redirected to login.html to test whether the code blog works, but the required redirection is to login.

#9

A post was split to a new topic: Automatically rename the route when file is renamed