How to redirect users with unverified emails using Angular UI-Router?

FullStack

I am using AngularJS with Meteor and wanted to redirect users with unverified emails to the sign in page. I have created a sign in view in /client/routes.js:

app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise('/');

  $stateProvider

  .state('signin', {
    url:'/signin',
    views: {
      main: {
        templateUrl: 'client/views/profile/signin.tpl'
      }
    }
  })

Note that there are other states I am not listing for brevity sake.

Now, I want to redirect users to this sign in page if their emails have not been verified. How do I modify the example below from UI-Router FAQs to meet my needs? Other solutions not using the example below are acceptable to me as long as they address the issue at hand.

Example: Uses the data object on the state config to define a rule function that will run logic against the user (here using an example service called $currentUser). The $stateChangeStart handler catches all state transition and performs this rule check before allowing the transition, potentially blocking it and/or redirecting to a different state.

app.config(function($stateProvider) {
  $stateProvider.state('privatePage', {
    data: {
      rule: function(user) {
        // ...
      }
  });
});
app.run(function($rootScope, $state, $currentUser) {
  $rootScope.$on('$stateChangeStart', function(e, to) {
    if (!angular.isFunction(to.data.rule)) return;
    var result = to.data.rule($currentUser);

    if (result && result.to) {
      e.preventDefault();
      // Optionally set option.notify to false if you don't want 
      // to retrigger another $stateChangeStart event
      $state.go(result.to, result.params, {notify: false});
    }
  });
});
vvondra

The example from the FAQ attempts to create a general way to add a rule to any page. Let's keep it simple:

app.run(function($rootScope, $state, UserService) {
    $rootScope.$on('$stateChangeStart', function(event, toState) {
        // don't check auth on login routes
        if (["signin"].indexOf(toState.name) === -1) {
            if (UserService.doesNotHaveVerifiedEmail()) {
                event.preventDefault();
                $state.go('signin');
                return;
            }
        }
    }
}); 

Anytime a state is loaded and it's not the signin state, you check if the user is verified (depends on your application, here I am injecting a UserService which I assume has knowledge about the user's status) and if not, you prevent that state change and redirect them to the signin page.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to ng-hide and ng-show views using angular ui router?

Angularjs ui-router. How to redirect to login page

angular-ui/ui-router, how do I inject partial view using $stateProvider?

Angular JS ui-router how to redirect to a child state from a parent?

How to pass parameter when I redirect the page in angularjs using ui router?

How to redirect in a ui-router resolver?

Using angular ui.router how to start in a standard html angular page and than move forward to one with ui.router template inside a folder?

How to use angular component with ui-router?

redirect using react router

angular js controller using angular-ui-router not working?

How to redirect users using "JavaScript Switch Statement"

how to redirect using react router

How to redirect remembered users?

How to enable route security when using AngularFire with Angular ui-router?

Modular Angular app using Angular UI Router and Browserify

Using ICS to redirect users?

Angular UI Router - How to use $uiViewScroll in code

How to check authentication and automatically redirect to login state with ui-router?

Angular UI Router: How to save parent state?

How to Lazyload controller and template in one request using angular-ui-router

How can redirect to 404 page in Angular ui router

Angular ngRoute/UI-Router strange redirect behaviour

UI Router redirect

How to remove # from Angular UI-router

Set up redirect with ui-router/Angular JS

Login redirect leads to infinite loop in ui-router for Angular 2

how to bypass DMARC for send emails by using any email for users

How to find all users that have emails in an array in prisma using Typescript?

Where to put unverified users?