Redirecting after form login

[Juriy]

Hello team,

Please help to solve a trivial issue: how should I programatically navigate to a certain route? For example, when user clicks a button on login form, after the form is validated, we move user to /home route.
Side note: I think it will also be very helpful to include into an official tutorial. Existing examples are only showing how to work with <UISref> elements to navigate.

So far, the way that I found is by injecting$transition$ into a resolve() function, then saving transition to a property of target component, then getting router instance from there. So the code looks like this:

// to get the router
const loginState = {
  name: 'login',
  url: '/',
  component: Login,
  resolve: [{
    token: 'router',
    deps: ['$transition$'],
    resolveFn: (trans) => trans.router
  }]
};

// then inside of <Login> component:
  onSubmit(e) {
    e.preventDefault();
    this.router.stateService.go('student');
  }

This code is working but it looks ugly. I'm sure there's a better way :)

[elboman]

Hi,

The best way to programmatically trigger a transition is via the stateService as you're already doing. The unnecessary part is having to declare the router as a resolve for the routed component, especially if you need it in many routes.

For this reason the transition object that brought you to a state is always injected as prop into the routed component, in this case Login. So you should find the transition already there, and be able to access it already:

// inside the <Login> component
onSubmit = (e) => {
  const {stateService} = this.props.transition.router;
  e.preventDefault();
  stateService.go('student');
}

[Juriy]

Thank you very much, that really helps!