Hướng dẫn sử dụng Guard trong angular check quyền admin

2023-07-13 15:08:34

Hướng dẫn sử dụng Guard trong angular check quyền admin phần 1.

Bài học hôm nay chúng ta sẽ ứng dụng guard trong angular để check đăng nhập với được vào các nhóm route của admin .

Bước 1: cmd: ng g guard auth

Chọn CanActivate

Bước 2: Mở route muốn bảo vệ thêm canActivate:[authGuard]

const routes: Routes = [
  {path:'',loadChildren:()=>import('./customer/customer.module').then((m)=>m.CustomerModule)},
  {path:'admin',canActivate:[authGuard],loadChildren:()=>import('./admin/admin.module').then((m)=>m.AdminModule)},
  {path:'login',component:LoginComponent}
];

Bước 3: mở file auth.guard.ts:

Bước 4: Tạo auth.service.ts: (Bạn phải chuẩn bị API trước nhé (trong bài này mình không hướng dẫn )

Code Login.component

export class LoginComponent {

  constructor(private authService:AuthService,private router:Router){}

  profileForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
    
  });

  onSubmit(){
   
    this.authService.login(this.profileForm.value).subscribe((data)=>{
     if(data){
       
        localStorage.setItem("auth",JSON.stringify(data))
        window.location.href = "admin"
     } else{
      console.log("Sai thong tin dang nhap");
      
     }
      
    })
  }
}