Authentication in Angular & JWT – Austin – Medium

  • Angular makes it dead simple wire up authentication through mechanisms like:Route GuardsRequest HandlersError HandlersI want to walk you through building some simple authentication in Angular using JWT as the authentication mechanism.Route GuardsRoute guards give you the ability to control access to a particular route in your application.
  • For this, we want to focus on creating a route guard with the CanActivate implementation.In the above example, in our canActivate function, we check if our token is expired.
  • Its pretty simple, in the route definition all you have to do is add a property called canActivate and reference our new auth guard.In this example, we want to protect the dashboard from being access but we need to let anyone access the login page.Auth ServiceNext we need to create a service that will handle our authentication and handling our JWT token.
  • Angular has a variety of ways we can do this, I decided to go with overriding the BaseRequestOptions and automatically appending headers to every request.Now, we need to tell Angular to use this class instead of the base one, we can do that via providers like so:Error HandlersIf a user gets logged out or happens to try to visit a page that they are not authorized to visit, our server might throw a 403 error.
  • In summary, we did the following:Using Route Guards to prevent unauthorized to routesAutomatically appending authentication tokens to HTTP requestsHandling 403 errors via a global error handler classI’m #ngPandaI hope you enjoyed the post, if you liked it follow me on Twitter and Github for more JavaScript

Authentication is one of those things like death and taxes; at some point we all have to write an application that has it. Angular makes it dead simple wire up authentication through mechanisms like…

@amcdnl: ✨ [Blog]: Authentication in #Angular with #JWT

👉

#javascript #angular2 #angularjs #angular4 #authentication

Authentication is one of those things like death and taxes; at some point we all have to write an application that has it. Angular makes it dead simple wire up authentication through mechanisms like:

I want to walk you through building some simple authentication in Angular using JWT as the authentication mechanism.

implementation.

function, we check if our token is expired. If its expired, we want to navigate the user to the login page.

and reference our new auth guard.

In this example, we want to protect the dashboard from being access but we need to let anyone access the login page.

Next we need to create a service that will handle our authentication and handling our JWT token. Wait what is a JWT? JWT stands for JSON Web Token. Essentially its a token that represents a claim between 2 parties; client and server in our case. These tokens typically have a id (user id) and expiration attached to them.

This service will handle:

and automatically appending headers to every request.

Now, we need to tell Angular to use this class instead of the base one, we can do that via providers like so:

class and redirecting them there.

Next we need to tell Angular to use this error handler instead of the default like so:

This was relatively easy to wire up using Angular’s amazing framework’s hooks. In summary, we did the following:

I hope you enjoyed the post, if you liked it follow me on Twitter and Github for more JavaScript tips/opinions/projects/articles/etc!

Authentication in Angular & JWT – Austin – Medium

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.