Implementing user authentication and authorization in your Angular application is crucial for security. You can achieve this by having a parent component, typically called the AppComponent, with the main router outlet inside it. This router outlet will load either the LoginComponent or a Component meant only for logged-in users.
Your root AppComponent router configuration may look like this:
{
path: 'login',
component: LoginComponent,
canActivate: [AuthenticationGuard]
},
{
path: 'app',
canActivate: [AuthenticationGuard],
component: HomeComponent,
children: [
// Other routes
]
}
In this setup, you can utilize CanActivate in your route configuration. CanActivate acts as a guard to ensure that users have the necessary permissions to access specific routes or components within your application.
For example, the AuthenticationGuard mentioned above checks if a user is authenticated before allowing access. By using guards like these, you can safeguard your application effectively. If the guard confirms a user is authenticated, they are redirected to the HomeComponent.
Consider the LoggedInGuard as an example of protecting the HomeComponent from unauthorized access:
@Injectable()
export class LoggedInGuard implements CanActivate {
constructor(private loginService: LoginService, private router: Router) { }
canActivate() {
if (this.loginService.isLoggedIn() !== true) {
this.router.navigate(['/login']);
return false;
} else {
return true;
}
}
}
If the guard returns true, the router proceeds to the specified route. However, if it returns false, the user is redirected to the login page to authenticate themselves.
By utilizing the AppComponent's router-outlet, you can switch between the Login and Home components seamlessly. Additionally, within the HomeComponent, you can create further router outlets to accommodate multiple protected components. These child components are nested under the HomeComponent.
To summarize:
Think of the HomeComponent as the central hub for safeguarded features within your application.