Merge pull request #9209 from abpframework/refactor/auth-utils

Angular UI: Created auth-utils.ts file to use some functions as shared

npm/ng-packs/packages/core/src/lib/models/auth.ts

@@ -0,0 +1,6 @@
+export interface LoginParams {
+  username: string;
+  password: string;
+  rememberMe?: boolean;
+  redirectUrl?: string;
+}

npm/ng-packs/packages/core/src/lib/models/index.ts

@@ -1,4 +1,5 @@
 export * from './application-configuration';
+export * from './auth';
 export * from './common';
 export * from './config';
 export * from './dtos';

npm/ng-packs/packages/core/src/lib/services/auth.service.ts

@@ -2,11 +2,8 @@ import { Injectable, Injector } from '@angular/core';
 import { Params } from '@angular/router';
 import { from, Observable } from 'rxjs';
 import { filter, map, switchMap, take, tap } from 'rxjs/operators';
-import {
-  AuthFlowStrategy,
-  AUTH_FLOW_STRATEGY,
-  LoginParams,
-} from '../strategies/auth-flow.strategy';
+import { LoginParams } from '../models/auth';
+import { AuthFlowStrategy, AUTH_FLOW_STRATEGY } from '../strategies/auth-flow.strategy';
 import { EnvironmentService } from './environment.service';
 
 @Injectable({

npm/ng-packs/packages/core/src/lib/strategies/auth-flow.strategy.ts

@@ -9,22 +9,17 @@ import {
   OAuthService,
   OAuthStorage,
 } from 'angular-oauth2-oidc';
-import { from, Observable, of } from 'rxjs';
+import { from, Observable, of, pipe } from 'rxjs';
 import { filter, switchMap, tap } from 'rxjs/operators';
 import { RestOccurError } from '../actions/rest.actions';
+import { LoginParams } from '../models/auth';
 import { AbpApplicationConfigurationService } from '../proxy/volo/abp/asp-net-core/mvc/application-configurations/abp-application-configuration.service';
 import { ConfigStateService } from '../services/config-state.service';
 import { EnvironmentService } from '../services/environment.service';
 import { SessionStateService } from '../services/session-state.service';
+import { removeRememberMe, setRememberMe } from '../utils/auth-utils';
 import { noop } from '../utils/common-utils';
 
-export interface LoginParams {
-  username: string;
-  password: string;
-  rememberMe?: boolean;
-  redirectUrl?: string;
-}
-
 export const oAuthStorage = localStorage;
 
 export abstract class AuthFlowStrategy {
@@ -145,7 +140,7 @@ export class AuthPasswordFlowStrategy extends AuthFlowStrategy {
           this.refreshToken();
         } else {
           this.oAuthService.logOut();
-          this.removeRememberMe();
+          removeRememberMe();
           this.appConfigService.get().subscribe(res => {
             this.configState.setState(res);
           });
@@ -153,19 +148,6 @@ export class AuthPasswordFlowStrategy extends AuthFlowStrategy {
       });
   }
 
-  private setRememberMe(remember: boolean) {
-    this.removeRememberMe();
-    localStorage.setItem(this.storageKey, 'true');
-    document.cookie = `${this.cookieKey}=true; path=/${
-      remember ? ' ;expires=Fri, 31 Dec 9999 23:59:59 GMT' : ''
-    }`;
-  }
-
-  private removeRememberMe() {
-    localStorage.removeItem(this.storageKey);
-    document.cookie = this.cookieKey + '= ; path=/; expires = Thu, 01 Jan 1970 00:00:00 GMT';
-  }
-
   async init() {
     if (!getCookieValueByName(this.cookieKey) && localStorage.getItem(this.storageKey)) {
       this.oAuthService.logOut();
@@ -184,7 +166,6 @@ export class AuthPasswordFlowStrategy extends AuthFlowStrategy {
   }
 
   login(params: LoginParams): Observable<any> {
-    const router = this.injector.get(Router);
     const tenant = this.sessionState.getTenant();
 
     return from(
@@ -193,11 +174,17 @@ export class AuthPasswordFlowStrategy extends AuthFlowStrategy {
         params.password,
         new HttpHeaders({ ...(tenant && tenant.id && { __tenant: tenant.id }) }),
       ),
-    ).pipe(
+    ).pipe(this.pipeToLogin(params));
+  }
+
+  pipeToLogin(params: Pick<LoginParams, 'redirectUrl' | 'rememberMe'>) {
+    const router = this.injector.get(Router);
+
+    return pipe(
       switchMap(() => this.appConfigService.get()),
       tap(res => {
         this.configState.setState(res);
-        this.setRememberMe(params.rememberMe);
+        setRememberMe(params.rememberMe);
         if (params.redirectUrl) router.navigate([params.redirectUrl]);
       }),
     );
@@ -211,7 +198,7 @@ export class AuthPasswordFlowStrategy extends AuthFlowStrategy {
       tap(res => {
         this.configState.setState(res);
         router.navigateByUrl('/');
-        this.removeRememberMe();
+        removeRememberMe();
       }),
     );
   }
@@ -219,7 +206,7 @@ export class AuthPasswordFlowStrategy extends AuthFlowStrategy {
   protected refreshToken() {
     return this.oAuthService.refreshToken().catch(() => {
       clearOAuthStorage();
-      this.removeRememberMe();
+      removeRememberMe();
     });
   }
 }

npm/ng-packs/packages/core/src/lib/utils/auth-utils.ts

@@ -0,0 +1,41 @@
+import { Injector } from '@angular/core';
+import { Router } from '@angular/router';
+import { pipe } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import { LoginParams } from '../models/auth';
+import { AbpApplicationConfigurationService } from '../proxy/volo/abp/asp-net-core/mvc/application-configurations/abp-application-configuration.service';
+import { ConfigStateService } from '../services/config-state.service';
+
+const cookieKey = 'rememberMe';
+const storageKey = 'passwordFlow';
+
+export function pipeToLogin(
+  params: Pick<LoginParams, 'redirectUrl' | 'rememberMe'>,
+  injector: Injector,
+) {
+  const configState = injector.get(ConfigStateService);
+  const appConfigService = injector.get(AbpApplicationConfigurationService);
+  const router = injector.get(Router);
+
+  return pipe(
+    switchMap(() => appConfigService.get()),
+    tap(res => {
+      configState.setState(res);
+      setRememberMe(params.rememberMe);
+      if (params.redirectUrl) router.navigate([params.redirectUrl]);
+    }),
+  );
+}
+
+export function setRememberMe(remember: boolean) {
+  removeRememberMe();
+  localStorage.setItem(storageKey, 'true');
+  document.cookie = `${cookieKey}=true; path=/${
+    remember ? ' ;expires=Fri, 31 Dec 9999 23:59:59 GMT' : ''
+  }`;
+}
+
+export function removeRememberMe() {
+  localStorage.removeItem(storageKey);
+  document.cookie = cookieKey + '= ; path=/; expires = Thu, 01 Jan 1970 00:00:00 GMT';
+}

npm/ng-packs/packages/core/src/lib/utils/http-utils.ts

@@ -1,4 +1,24 @@
+import { HttpParameterCodec } from '@angular/common/http';
+
 export function getPathName(url: string): string {
   const { pathname } = new URL(url, window.location.origin);
   return pathname;
 }
+
+export class WebHttpUrlEncodingCodec implements HttpParameterCodec {
+  encodeKey(k: string): string {
+    return encodeURIComponent(k);
+  }
+
+  encodeValue(v: string): string {
+    return encodeURIComponent(v);
+  }
+
+  decodeKey(k: string): string {
+    return decodeURIComponent(k);
+  }
+
+  decodeValue(v: string) {
+    return decodeURIComponent(v);
+  }
+}

npm/ng-packs/packages/core/src/lib/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './array-utils';
+export * from './auth-utils';
 export * from './common-utils';
 export * from './date-utils';
 export * from './environment-utils';