Angular 2 authentication with web api for SPA - rest

Question

What are the best practices of creating an authentication system for angular 2 SPA. Is there any built-in Angular2 modules to handle this?

Answer 1

The core thing you need is a guard to prevent routing to pages that require authentication. Thoughtram has a great article on guards and Jason Watmore has a brilliant post showing a full authentication mechanism using a guard and JSON Web Tokens.
Whether you use JWT (and there are reasons not to) or sessions (and there are reasons not to), it all comes down to the guard.
You write a guard like this:
#Injectable()
export class AuthGuard implements CanActivate {
constructor (private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (isTheUserSignedIn()) {
return true;
}
// If not signed in, navigate to the login page and store the return URL
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}
And then, wherever you configure the routes for your app module, you need to tell the route to use your guard:
const appRoutes: Routes = [
// Protect the Home route using the guard
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
// Don't protect the login and register pages
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
// Don't protect pages that don't need protecting
{ path: 'some-unprotected-page', component: UnprotectedPageComponent },
// Default redirect
{ path: '**', redirectTo: '' }
];