App requires Login - this.$f7router.navigate() breaks the app

1

So following situation:

I have a working Framework7 Cordova App, which works just fine.

The render method of my main <App/> component looks like this:

render() {
    const { currentUser, loggingIn, authenticated } = this.props;
    return (
      <MainProvider>
        <F7App params={f7params}>
          <Statusbar />
          <View init main url="/dashboard" {...this.props} className="is-mobile" />
        </F7App>
      </MainProvider>
    )
  }

So the standard URL is /dashboard, which renders a Component which checks if the user is authenticated:

export default class Authenticated extends React.PureComponent {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    return this.maybeRedirect();
  }
  componentDidUpdate() {
    return this.maybeRedirect();
  }
  maybeRedirect = () => {
    const { currentUser, loggingIn, authenticated } = this.props.f7router.params;
    if(!authenticated && !loggingIn) {
      console.log('redirect!');
      return this.$f7router.navigate('/login');
    }
  }
  render() {
    const { Component, ...rest } = this.props;
    return (
      <Page>
        <Nav {...rest} />
        <Component { ...rest } />
      </Page>
    )
  } 
}

This redirect works just fine, after a fresh reload, if the user is NOT authenticated, the app redirects to /login and shows the login screen.

login.js component:
Some <form> is submitted, onSubmit a component method is called:

login = e => {
  Meteor.loginWithPassword(login, password, (error) => {
    // if all is fine
    this.$f7router.navigate('/dashboard'); // <-- this navigate() is not working at all
  });
}

So for some reason this “second” navigate() is not working at all, no errors, nothing, just nothing is happening. This is a big problem, because: If a user just installed the app, this user can new login, as this redirect is not working and thus the user is stuck on the login screen.

What am I doing wrong?
What is the proper way to ensure that the user is logged in?

EDIT:
I now tried something like this:

{
    path: '/dashboard',
    component: Authenticated,
    name: 'dashboard',
    redirect: function (route, resolve, reject) {
      if(!this.params.authenticated) resolve('/login');
      else reject();
    },
    options: { props: { Component: Dashboard } }
  },

This seems also broken! The redirect works, but if the user is already loggedin reject() does nothing and does not render the actual component.

Why is this all so buggy?

Thanks!
Cheers, Patrick

2

Use route’s beforeEnter for this approach, it fits better for this purpose, don’t use redirect within page component, e.g.:

{
  path: '/dashboard',
  component: Authenticated,
  name: 'dashboard',
  beforeEnter(to, from, resolve, reject) {
    const router = this;
    if(!authenticated) {
      reject();
      router.navigate('/login');
    } else {
      resolve();
    }
  },
  options: { props: { Component: Dashboard } }
},
3

Hi!

So I just tried implementing the beforeEnter - redirecting to Login works, BUT: After logging in and then calling this.$f7router.navigate('/dashboard'); inside my <Login/> Component does absolute nothing - the app is not navigation to my other route. :frowning_face:

4

Do you have live example?

5

I think I got it too work like that:

<App/> render():

render() {
    const { currentUser, loggingIn, authenticated } = this.props;
    let initUrl = "/dashboard";
    if(!loggingIn && !authenticated) initUrl = "/login";
    return (
      <MainProvider>
        <F7App params={f7params} {...this.props}>
          <Statusbar />
          <View init main url={initUrl} className="is-mobile" {...this.props} />
        </F7App>
      </MainProvider>
    )
  }

This works now :slight_smile: - looks okay to me no?!

6

Yeah, seams like look ok for me too