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 implements CanActivate-inteface
  • app-glbl-login.component.ts-the component makes an additional permission vector request for the current user
    • this.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-file
  • doSubmit()-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(['/']);
    }