AngularJs and Angular-UI-Router Route Permissions

I had a problem with how to implement route restrictions based on the remote data received from the server.

Suppose I have the following configuration file:

angular.module('myApp') .config(['$stateProvider', function($stateProvider) { $stateProvider .state('post', { url: '/post/:post_id', abstract: true, [...] }) .state('post.view', { url: '/view' [...] }) .state('post.edit', { url: '/edit' [...] }) }]); 

Requirements for my application:

  • A post has an owner (message creator), and its domain can be public or private.

  • If the domain is publicly available, each user will be able to see the message (entering post.view status), and if not (the domain is private), only the owner will be able to see it.

  • The post.edit state post.edit available only to the owner.

To do this, what is the best approach?

I was thinking of agreeing to a promise that retrieves data from the server (mail domain and the corresponding user role), performs the necessary checks, and returns accordingly (the promise is allowed or rejected).

But then, how would I redirect the user to the correct state if he is not authorized? For example, an ordinary user trying to access post.edit state should be redirected to post.view state if the mail domain is public ... But if the mail domain is private, an unauthorized access page should be presented. Is it a good approach to do it right on the solution? What are the alternatives?

+6
source share
1 answer

Take a look at this great role-based routing authorization guide:

role based authorization

Also look at this stackoverflow answer, there is conditional login-based routing here, you can use the same role logic for your purpose,

Ui-router, permission-based routes

+5
source

All Articles