How to Design the routing for a app starting with login screen

1

What is the best or prefered way to design an App where the first page is a login screen.

I am asking this because using the “/” page as a login screen is not so clean. because than everyone who is logged in has to be redirected to the “/start” page which imo deosnt work always. especiall if you are using pushstates. Pages with require a login has to redirect aswell which is in some cases buggy aswell and lets the vistor through and view the page which he is not allowed to visit without login.

The templates which are online are designed with a secondary login page (you access almost all content without login)

So my question is just how should the router or app be designed to have the login screen initially but only if the user is not logged in?

2

Hi momo,
I made it this way, i dont know if this is a good solution:

...
  {
    path: '/',
    on: {
      pageBeforeIn: function test (e, page) {
        ValidateUser()
          .then(res => {
            if (!res) {
              // Unauth user. Go to login
              page.router.navigate('/login/')
              console.log('user NO valid')
            }
          })
          // Something went wrong. Go to login
          .catch((err) => {
            console.log(err)
            page.router.navigate('/login/')
          })
      }
    },
    async (routeTo, routeFrom, resolve, reject) {
      const vueComponent = () => import('./views/Home.vue')
      vueComponent().then((vc) => {
        resolve({ component: vc.default })
      })
    }
  },
...

But it would be interesting/helpful to see another solution/implementation.

2 Likes
3

So u actually check for login on every page?

4

Hello.

That is the way I do it too.

It does not check for log in on each page, only on the first load. From then on the app only modifies the contents of the pages, but it is not loading everything over and over again.

You mention that some of your pages require login and others do not. Then you would need to check for login in each one of those cases. Maybe you can add that in the router specifications like @pvtallulah did.

Hope that helps.

1 Like
5

I check always the user enter to home page, path: ‘/’.Thats bcs a user could loose access to the app at any time. Every other page i dont check auth.

6

if you want the cached data valid,hook login check function via request will be better;other way via asyned route controling page loading

7

Guys thank you very much for all of your replies.

I came up with a good idea, which i would like to test out and ask you about it.

The idea is to always have a login check just like hongfu said with in the request function and wether or not this is met the user is sent to the login page.

On Backend every Endpoint would check wether the user is logged in and return a standardized error message if the login is not met.

That way i wont need a dedicated checkLogin method at all as every request requires login.

Guys I think this is the way to go! Thank you very much!

8

I’m curious how you actually implemented it in the end. Could you share that with us?

9

My latest approach, which I think is the cleanest way todo it.
I have 2 separate routes files. (this makes it impossible to access routes of other states)

  • one is for routing through unlogged in state
  • one is for routing through logged in user state

Thanks to the latest use of app root component we can do that right now:

<template>
    <div id="app">
        {{#if loggedIn}}
            <!-- Your main view, should have "view-main" class -->
            <div class="view view-main safe-areas" id="view-main" data-main="true" data-name="main" data-url="/home"></div>
        {{else}}
            <div class="view view-landing safe-areas" id="view-landing" data-name="landing" data-url="/"></div>
        {{/if}}
    </div>
</template>

With that we differentiate between which view to display
and in the logic part I use that after checking if the user is logged in:

                        self.$setState({
                            loggedIn: true
                        }).then(function() {
                            app.preloader.hide();
                            app.views.create('.view-main', {
                                name: 'main',
                                main: true,
                                routes: window.routesMain,
                                url: '/'
                            })
                        });

and else

                app.views.create('.view-landing', {
                    name: 'landing',
                    url: '/'
                })

this all I have in the method: mounted() and after self.$f7ready of app root components

One drawback is that the user gets displayed the landing page often for a blink of a moment, what could be done to prevent this is to display a loading page for that moment.

10

I used the iOS app to create a website (no code). Users could not see the content until they logged in. There was no such feature on WordPress, so I looked for this feature in other engines. The traditional way to design an iOS app is to use an MVC (Model-View-Controller) template. Using MVC for an application’s architecture can lead to the idea that each class represents a model, a representation, or a controller. But if you build a menu there, https://create.vista.com/create/menus/, you can set an entry ban or restrict access.