Can you give me some Tips to Secure Your Angular Application

If you are trying to block some routes from loading based on some permissions or blocking a route based if not authenticated, then you can use this:-

Use Route Guard for navigate your page :-

Add components (e.g auth.gaurd.ts)

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (localStorage.getItem('currentUser')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}

add this code on your app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './components/_guard/auth.guard';
import { HomeComponent } from './components/home/home.component';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{
path: '', component: LayoutComponent, children: [
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
]
},
{ path: 'login', component: LoginComponent },
{ path: '**', redirectTo: 'home' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vikas7y ago
If you are trying to block some routes from loading based on some permissions or blocking a route based if not authenticated, then you can use this:-

Use Route Guard for navigate your page :-
Add components (e.g auth.gaurd.ts)
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}
add this code on your app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './components/_guard/auth.guard';
import { HomeComponent } from './components/home/home.component';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  {
    path: '', component: LayoutComponent, children: [
      { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: 'home' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
0
Ibrahim Siddique7y ago
Refer below link

https://www.codemag.com/article/1805021/Security-in-Angular-Part-1
0
Piyush Pansuriya7y ago
Hi,
For security, authentication and authorization is the main thing.
You can implement by using Identity User in your .net core project.

You can secure your api by implementing this.
Please go through the below link
https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity?view=aspnetcore-2.2&tabs=visual-studio

https://docs.microsoft.com/en-us/aspnet/core/security/authentication/customize-identity-model?view=aspnetcore-2.2
+2