Sample JWT authenticated routes for angular

[jadjoubran]

As suggested by @iannazzi
Following #202 and #129
it makes sense to have a ui router setup for routes requiring authentication

[shiruken1]

How I did it was by adding this to the routes.js.

    angular.module('app.routes').run(function ($auth, $state, $rootScope) {

        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
            //prevent access to unauthorized routes
            if ( toState.authenticate && !$auth.isAuthenticated() ){
                event.preventDefault();
                return $state.go('app.login');
            }
        });

    });

and then just adding:

authenticate: true,

To each state definition needing the user to be logged in before accessing.

Cheers!

[kujtimiihoxha]

@jadjoubran I would do it like described here https://medium.com/@petehouston/protect-authentication-routes-in-angular-ui-router-and-satellizer-7745257a7e6#.jmmnk113t, If you like I could submit a pull request for this 😉

[jadjoubran]

hmm why not use ui-router's data argument? This is how I've done it in multiple projects
If we can get @jadsalhani's opinion on this it would be great

[shiruken1]

@kujtimiihoxha I think I tried that prior to the one I suggested, but couldn't get it to work properly.

@jadjoubran That's awesome! I could finally pull off something I've been wanting to do for a while now: authorization levels. Sweet, thanks!!

[jadjoubran]

Actually @kujtimiihoxha after thinking about it, with the data arguments you'll be able to easily allow access based on authorization levels..

data: {
    auth: 'public'
}
//or
data: {
    auth: 'user'
}
//or
data: {
    auth: 'admin'
}

[kujtimiihoxha]

@jadjoubran how would we implement this with satellizer ? I do not have any experience with satellizer .

[jadjoubran]

Indeed.. with the current settings, satellizer only gives us whether the user is logged in or not.. but we cannot provide multi-user types auth out of the box, because it's not always the case
However we can just set the stage by using data attributes and it'll be relatively easy (maybe later on we can do screencasts/recipe for it)
I'll push something soon, since I have it in 3 projects running on production

[shiruken1]

Exactly! Using my method of tapping into the transition of $state, we could
have it check for the user's authorization level (or in my case, individual
permissions) and then make the determination based I the data attribute
values.
On Mar 27, 2016 8:02 AM, "Jad Joubran" notifications@github.com wrote:

Indeed.. with the current settings, satellizer only gives us whether the
user is logged in or not.. but we cannot provide multi-user types auth out
of the box, because it's not always the case
However we can just set the stage by using data attributes and it'll be
relatively easy (maybe later on we can do screencasts/recipe for it)
I'll push something soon, since I have it in 3 projects running on
production

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#223 (comment)

[jadjoubran]

I added the generic functionality in routes.run.. you can easily add your own logic if you have multi-user auth
Also this behaviour is not enabled by default, there's a comment in index.route that says if you use data: {auth: true} then it would require JWT auth

Let me know what you think!

[kujtimiihoxha]

@jadjoubran I have noticed that there is a very cool feature added with your solution that makes it very easy to add routes to authenticated routes, you can add an abstract state ex. admin and then add the data :{auth:true} to that state, all other states that have the admin page as parent will require authentication ex:

.state('admin', {
            abstract: true,
            data: {
                auth: true
            },
            views: {
                header: {
                    templateUrl: getAdminView('header')
                },
                footer: {
                    templateUrl: getAdminView('footer')
                },
                main: {}
            }
        })
        .state('admin.dashboard', {
            url: '/admin/dashboard',
            data: {
                test: 'test'
            },
            views: {
                'main@': {
                    templateUrl: getAdminView('dashboard')
                }
            }
        })

here you can see an example, of this feature, also even if you add extra data to the admin.dashboard state the previouse auth:true will not be overwritten. I think we could implement this as an example of authenticated route. Also I think that if you go to a page that needs authentication we should redirect to login and not to the landing page, what do you think ? If you agree I can submit a pull request for this example.

[jadjoubran]

Indeed 😄 ui-router makes these things amazingly simple

I am trying to stay away from baking in admin related solutions into the boilerplate because not everybody is building a an admin.. so maybe this fits more for the recipes? I think eventually we'll have a section dedicated to admin apps
I'm also usually worried about serving way too many routes/components/etc by default

And yes the PR would be great (to redirect to login) 😄

[kujtimiihoxha]

@jadjoubran Ok than I thought since it is very easy to implement to add this as an example. But anyway I will submit the PR for the login redirection.

[radiumrasheed]

HI, how can I implement this on the backend

data: {
    auth: 'public'
}
//or
data: {
    auth: 'user'
}
//or
data: {
    auth: 'admin'
}