In this post I am going give simple example how we can
implement authentication but here I am giving simple step
First Create Angular application with routing enable
>ng new RoutingAuthentication
? Would you like to add Angular routing? (y/N) Yes
Here we need to enter yes so that it will enables routing by
default
How it will asks for styling select CSS
And it will creates the Angular application
Note: it takes several minutes
Now navigate to folder
Open the Folder in Visual Studio code
Here we can see the file name
It will be create by default as we enabled routing while
creating angular application
app-routing.module.ts
By default the ts file contains the above content
Now open the app.component.html
We can see new tag as
shown below
This routing node is responsible to render the given
component
Now create 4 components
>ng g c about-us
>ng g c contact-us
>ng g c dashboard
>ng g c login
Here update the
content of 4 component with corresponding information
But we want to restrict Dashboard component on some
condition like some value we it should available in session then only it should
allow to see the component other wise we redirect to login page
Note: Here I do not have any service to check user name and
password so
Here on click of login I taking some input and storing in
session and that I am checking as authentication
Now open login component html and update the content
CheckUser function is written shown in below
Here is setting empid to session
sessionStorage.setItem("empid",empid);
We need to restrict (authentication) Dashboard component by
checking the this empid in session
This logic we can write special file that is called
CanActivate imterface will help to do this
Add new TypeScript File as shown below
Here the class MyGuard is implemented by CanActivate
Now we need to implement canActivate() method
This method will return Boolean value if it is true then it
will allow to access the component other wise it will now allow
So we are checking session value and allowing user to access
by returning true other wise it will return false and we are redirecting to
login component
For navigating we are using router service
Now open the app-routing.module.ts
Add below routing path for each component
Here we are restring Dashboard component by enabling MyGuard
for canActivate parameter
{path:"home",component:DashboardComponent,
canActivate:[MyGaurd]},
{path:"**",component:LoginComponent},
Open the dash board component and add logout button in that
clear the session as shown below
<div>
<h2>welcome to home page</h2>
<input type="button" value="Logout" (click)="Logout()">
<br>
</div>
In ts file add Logout() function as shown below
Logout(){
sessionStorage.removeItem("empid");
this.router.navigate(["login"]);
}
In App-component.html update below content
<div style="align-content: center;width:100%">
<h2 >Welcome to angular routing </h2>
<a routerLink="/aboutus">About Us</a>
<a routerLink="/contactus">Contact Us</a>
<a routerLink="/login">Login</a>
<hr>
<br>
</div>
<router-outlet></router-outlet>
Access the application
About Us component able to access
Dashboard component we assigned home as routing path
Now try to access Home
Click on logout it will redirect to login component
Here it is basic steps , we can write our own logic like
checking user details in data base or web api
