Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ui-router: How to get next state params in transition

I'm using ui-router 1.0.0.beta.3. How can get I route parameters of next state during a transition?

index.run.js

$transitions.onStart({ to: '**' }, verifyAuth);

function verifyAuth(trans) {
  let nextState = trans.$to();
  if (Auth.verify(nextState.authGroup) === -1) {      
    return $state.go('login', { nextState: nextState.name, nextParams: nextState.params}); // this doesn't work
  }
}

I want to store them so I can redirect the user to the state + state params he was trying to access, after authentication is succeeded.

login.component.js

let nextState = this.$stateParams.nextState;
let nextParams = this.$stateParams.nextParams;
$state.go(nextState, nextParams);
like image 697
Danie A Avatar asked Oct 25 '16 14:10

Danie A


People also ask

What is transition Hook?

A Transition Hook is a callback function that is run during the specific lifecycle event of a Transition. The hook function receives the current Transition object as the first argument.

What does transition superseded mean?

A transition is a long running operation (due to async processes, etc). Transition superseded means that there was a transition #1 started and it hasn't yet completed.

What is state params?

$stateParams captures url-based params that $state considers applies to that state, even if its child state contains more params. $state. params seems to capture all url + non-url based params of the current state you are in. If you are in state parent.

What is UI sref in AngularJS?

State-To-State Navigation of ui-sref in Angular The ui-sref directive is the first option to navigate from one state to another. The href property of the HTML anchor element is likely acquainted with you; likewise, the ui-sref directive refers to a state reference.


1 Answers

the answer to your question is Transition.params()

function verifyAuth(trans) {
  let nextState = trans.to();
  let nextParams = trans.params();
  if (Auth.verify(nextState.authGroup) === -1) {      
    return $state.go('login', { nextState: nextState.name, nextParams: nextParams});
  }
}

However, I recommend studying how the ui-router 1.0 sample app performs authentication checks and login redirects:

This hook redirects the unauthenticated transition to the login state by returning a $state.target('login')

https://github.com/ui-router/sample-app-ng1/blob/master/app/global/requiresAuth.hook.js#L15-L24

In the login state, the "state to return to after login" is determined. It checks the original transition's destination using Transition.redirectedFrom().

https://github.com/ui-router/sample-app-ng1/blob/master/app/main/app.states.js#L44-L83

like image 116
Chris T Avatar answered Sep 19 '22 01:09

Chris T