102 Security: Authorization. Client Side. - chempkovsky/CS82ANGULAR GitHub Wiki
Two aspects
Notes
Two aspects
Security has two aspects: Authentication and Authorization
Notes
- The real data protection is implemented on the server side. Client-side security is just a cosmetic helper. It can disable navigation to those pages whose data is not allowed for the current user. It can disable navigation to add/update/remove pages if these operations are disabled for the current user and for the current view.
- We don't need to generate additional code for the Angular project since everything is already in place.
app-glbl-settings.service.ts
-service implementsCanActivate
-intefaceapp-glbl-login.component.ts
-the component makes an additional permission vector request for the current userthis.scrtSvr.getPermissions()
-method is called after login
doSubmit() {
if(typeof this.loginFormGroup === 'undefined') return;
if(this.loginFormGroup === null) return;
if (this.loginFormGroup.invalid) {
this.loginFormGroup.markAllAsTouched();
return;
}
this.scrtSvr.login(this.loginFormGroup.controls['username'].value, this.loginFormGroup.controls['password'].value)
.subscribe({
next: (respdata: any ) => { // success path
this.appGlblSettings.setAuthInto(respdata);
this.appGlblSettings.userName = this.loginFormGroup.controls['username'].value;
this.router.navigate(['/']);
this.scrtSvr.getPermissions().subscribe({
next: (rspdt: {modelName: string, userPerms: number}[]) => {
this.appGlblSettings.vwModels = {};
rspdt.forEach((r: {modelName: string, userPerms: number}) => {
this.appGlblSettings.vwModels[r.modelName] = r.userPerms;
});
},
error: (error) => {
this.appGlblSettings.showError('http', error)
}
});
},
error: (error) => { // error path
this.appGlblSettings.showError('http', error)
}
});
}
- when all will be ready we need to turn on cosmetic security.
app-glbl-settings.service.ts
-service and modify two methods by removing the very first line of code
getViewModelMask(vwModel: string): number {
return 31; // delete this line when vwModels is ready
let pk = this.vwModels[vwModel];
if(typeof pk === 'undefined') { return 0; } else { return pk; }
}
getDashBrdMask(dshBrd: string): number {
return 1; // delete this line when dshBrds is ready
let pk = this.dshBrds[dshBrd];
if(typeof pk === 'undefined') { return 0; } else { return pk; }
}
- open the
app-glbl-logout.component.ts
-filedoSubmit()
-method removes all permission after logout
doSubmit() {
this.appGlblSettings.perms = [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0, 1,0,0];
this.appGlblSettings.setAuthInto(null);
this.appGlblSettings.userName = null;
this.appGlblSettings.vwModels = {};
this.router.navigate(['/']);
}