In today’s blog we are going to see about the usage of Authentication and Authorisation working in the Single Page Applications. Basically applications are designed in such a way that the user has to authenticate themselves to see certain data or to perform certain action on the application. This is where the Logging in action comes in to picture to identify the user.
The server will be responsible to identify the end user. It exposes the user to an authentication point. At the endpoint the user will enter the credentials to log in which will be sent to the server for verification. Typically the service may respond with access token or object with name and role mentioned. Based on this the user can validate the credentials. With this only the user can access token in all secured requests made to server.
From this action we can see that the access token will be used multiple times and hence it is better to store it on the client side. In Angular, the value can be stored in a service or as a singleton object on the client side. But the problem with storing as a singleton object is that it cannot be used once the page is refreshed thus prompting the action to enter credentials again. Thus is suggested to store the value preferable by SessionStorage, as it will be cleared only when the browser is closed.
Implementing Login
Let as assume that we have the server side logic implemented and the service exposes an endpoint to check the credentials and provide an access token. Let’s write a simple service that performs the action to login by a clickable button which is the authentication endpoint.
Handling Page Refresh
If the user hits the refresh button, then the service loses it state. Rather than asking for the credentials again we have to fetch the data from the browser’s sessionStorage and assign to the variable so as maintain the logged in status. As a factory is invokes only once, we can ser this variable in an initialization function.
Logging Out
If the user logs out of the application, then the corresponding API has to be invoked with the access token included in the request headers. Once the user is logged out, we should clear the data in sessionStorage as well. The following example contains the logout function that has to be added to the authentication service.
Set and get the token using AuthToken service.
login.js
Changing the state to be mange the process
Change the state from one to another to check the token is present or not. If the token is present move another state else it moves to the login state.
- AuthToken service is get and set the token.
- Session Storage is to be storing the token details. Suppose the page is to be refreshing it gets the token into the session Storage.
Authorization and Role based permissions
We will be adding 2 Layer to implement Authorization in our app
- UI manipulation – Showing or hiding part of the screens based on the user permission
- Routing – When the user access a route that he doesn’t have permission will redirect him to an error route
How will we implement it?
- We want to get all the user permissions before loading our app
- then we will store it (using a service)
- for showing/hiding sections of our app that require special permissions we will use a directive for that
- Then when we define a route we will add extra parameter permission and give it’s a value for the permission.
Adding the permission service in app.js and login.js
app.js
login.js
Set and get permission list
set and get the permission list using permission factory. If access any page to the permission list.
permission.js
Has permission directive
- How to show/hide UI elements based on the user permissions
- In this part we will be building a directive that will show & hide elements based on the user permissions.
haspermisison.js
Show and hide the HTML element
Single permission:
As seen in the example above we are using has-permission and passing it the permission name.
Multiple permission
If sometimes need for multiple permission at a single element so change the haspermission directive
It accept for multiple permission using AND,OR operator
hide the Html element
Access Validation while calling the API
What we have done so far is hiding the parts of the UI that the user doesn’t have access to, another part is putting permissions on the angular routes itself, so if the user writes the URL by hand the permissions will still work
If check the permission is available in the permission list then it allowed to get the detail and allow to access the root .