Redirect on successful login

1

I’m using Framework7 with React and Redux, and I’m trying to redirect a user to another page on successfully logging in. I have the login working successfully, but I can’t seem to get it to move to another page when the login completes.

I’ve been going round in circles with this for days now - there are NO examples or tutorials online for this. All the React/Redux tutorials for login/redirect/etc use the React Router, rather than the Framework7 one, and all the Framework7 login/redirect/etc tutorials and examples are for Vue.js.

I have tried putting a check in my routes.js:

function checkAuth (to, from, resolve, reject) {
  if (store.getState().auth.isAuthenticated) {
    resolve()
  } else {
    resolve({
      loginScreen: {
        component: LoginPage
      }
    })
  }
}

var routes = [
  {
    path: '/dash/',
    component: DashboardPage,
    beforeEnter: checkAuth
  },

but that never gets checked.

I’ve tried checking for prop changes in the login screen to detect whether the user is authenticated, and then redirecting after, but that doesn’t work either.

Does anyone have any pointers for me? I’m seriously considering just re-writing everything in React/React Native and doing it like the hundreds of examples already out there.

2 
function checkAuth (to, from, resolve, reject) {
  const router = this;
  if (store.getState().auth.isAuthenticated) {
    resolve()
  } else {
    reject();
    router.navigate('/login/');
  }
}

var routes = [
  {
    path: '/dash/',
    component: DashboardPage,
    beforeEnter: checkAuth
  },
   {
    path: '/login/',
    component: LoginPage,
  },
3

Or

const routes = [
  {
    path: '/dash/',
    async(to, from, resolve, reject) {
      if (store.getState().auth.isAuthenticated) {
        resolve({
          component: DashboardPage
        });
      } else {
        resolve({
          component: LoginPage
        });
      }
    }
  },
3 Likes
4

Excellent, thank you for that. I was close, but not quite there. Thank you for the help.