Angular JWT Authentication & User Role based Auth Guard | Egret Admin Template | UI Lib

hello everyone this is Rafi from UI Lee today we are going to play with angular authentication then role based authentication using egret angular admin template if you don't know what is equal typing template please check the description in previous video I showed how to work with lazy loading and site collaboration I provided the video link in the description first take a look at a REST API so who is I will be using for authentication I build up using node.js and MongoDB you need your own REST API server I will try to make another video for the server-side implementation basically we will be using two API is one is for logging who is a support / local this API returns a token and user absent and other one is API slash user slash profile we will use this API for checking the token is valid because this if they will not give us user object without valid token lets artists impose it this is our sign-in base if your template have multiple sign in and sign up basis for this tutorial we are going to use this space open the sign component authentication starts with signing user submits username and password then sign in method of JW our service is called let us take a look at sign-in method of JW Earth service right now we have implementation of more server which does nothing except send a response of a dummy token and user remove that code block and uncomment the actual implementation of HTTP request we are sending HTTP POST request and sending username and password to the server if the user and password is correct the server responding with the token and the user object let's lock that response to console and see what's inside the response [Music] great we have a real token and easy let's get back to signing me through and set this token and user to browser local stores so we can use it we are passing token user and a trouble envelope to set user and token method set user and token method makes is authenticated variable true as high in protein and user to its corresponding variables and set the token and user object in local stores I have created a service for local stories with few methods so we can easily save energy live local data after this process sign-in method of simon component redirects the user to a protected route and it is a return URL now we will take a look at what is return URL in a second now open what got file our routes are protected by our third connectivity method of path card returns true or false based on individual status of either if user locked in connectivity returns true and the user can access the put in two drops and if not orkut redolence user to sign in this and add a query parameter to sign in this URL and it's called a return so what is written return is the URL where user wanted to access before signing process we redirect user to this return eval or in sign and successful that was us to see in signing component let us see this in action first log out and eat a protected out in this case other / Bank but we landed on a scientist and it has a query parameter editor whose value is other slash plant and this value is URL encoded let's login username and password great our user is authenticated and can pass through our work that after signing but what happens when the app is reloaded or user come back to our application and browser is still has a valid token we don't our user login again so we check browser has spoken and it's valid when the application bootstrapped or loaded first you go back to zwt called service and take a look at that check propane is valid method we call this method inside the constructor of Cadman layout one point you can call it inside app component who is this food component of application we called it inside admin layout because we have a landing this and we don't want to check token validity when user lands on landing this because this London press is a public place check poking is valid method sensor care to the worst to API slash user slash profile and get user object API slash user slash profile doesn't give us user object without a valid token but we didn't provide a token from this method we provided this token from the HTTP interceptor let's open to an interceptor file the intercept method is called immediately after calling any HTTP method intercept method can modify or block HTTP call here we are just assigning our token to the request error so in future for your posit you may need to make lot of HTTP requests and this request will require of the elliptical and you don't need to worry about that it's already done let's get back to the check token is valid method in GWT of service we are doing the same thing but we did after sign in and you don't call if the token is invalid we call sign out method which it removes the data from local storage and redirects user to sign in this if we reload the browser and open of developer tools and filter by egg space are you can see HTTP requests who have been authorization token in request header and its response is user upset so that's it for the authorization part now let's start all based authentication not every posited to roll based authentication if you don't need in your posit you can escape from the server side you need to provide a role with these are opposite I have already implemented a role based authentication on my server on the client side we already have roles are defined in config file you can edit the roles as your positive government for role based authentication we need to protect is individual around suppose we want to give access our other slash blank route to only super admin for that open others routing file and add user on guard then add roles from config inside data object now our planned route is only visible for superable basically it's an array of strings config dot auth roles dot s a is an array and it contains only one string who is is a that's why only super admin can access I could also use author also dot admin area and this area contains a sa an admin so super admin and admin would have access let's take a look at user role guard it takes the role array from the route data if it contains the role of logged in user role then it returns true otherwise it returns false and false an alert to the user that the page is not accessible let's quickly at another unprotected route so we can see how a protected route behave let's see this in action right now I am logged in as a super user we can see that in local stories and I can access the route if I log in with another account which account role is not super admin grid I can access the unprotected route and not the protected one that's it for today [Music]

Channel: UI Lib

Views: 15,921

Rating: 4.6626506 out of 5

Keywords:

Id: -Y6DoRujvAk

Length: 7min 55sec (475 seconds)

Published: Tue Apr 28 2020