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.


#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.


#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!