refactor: refactor AlainI18NGuard

ng-alain · Jul 21, 2023 · 1fc362e · 1fc362e
1 parent 548a061
commit 1fc362e
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 28 deletions.
diff --git a/docs/i18n.en-US.md b/docs/i18n.en-US.md
@@ -203,14 +203,14 @@ Use the [defaultLanguage](/cli/plugin/zh#defaultLanguage) plugin to quickly swit
 
 ## Internationalized routing
 
-If you want to toggle internationalization by routed URLs, e.g. by accessing `/zh` and `/en` to change the language, just use the `AlainI18NGuard` guard in the root route:
+If you want to toggle internationalization by routed URLs, e.g. by accessing `/zh` and `/en` to change the language, just use the `alainI18nCanActivate` guard in the root route:
 
 ```ts
 const routes: Route[] = [
    {
      path: '',
      component: LayoutComponent,
-     canActivateChild: [AlainI18NGuard],
+     canActivateChild: [alainI18nCanActivate],
      children: [
        { path: '', redirectTo: 'en', pathMatch: 'full' },
        { path: ':i18n', component: HomeComponent }

diff --git a/docs/i18n.zh-CN.md b/docs/i18n.zh-CN.md
@@ -203,14 +203,14 @@ export class AppModule {}
 
 ## 国际化路由
 
-若想通过路由的URL来切换国际化，例如：通过访问 `/zh` 和 `/en` 来变更语言，则只需要在根路由中使用 `AlainI18NGuard` 守卫：
+若想通过路由的URL来切换国际化，例如：通过访问 `/zh` 和 `/en` 来变更语言，则只需要在根路由中使用 `alainI18nCanActivate` 守卫：
 
 ```ts
 const routes: Route[] = [
   {
     path: '',
     component: LayoutComponent,
-    canActivateChild: [AlainI18NGuard],
+    canActivateChild: [alainI18nCanActivate],
     children: [
       { path: '', redirectTo: 'en', pathMatch: 'full' },
       { path: ':i18n', component: HomeComponent }

diff --git a/packages/theme/src/services/i18n/i18n-url.guard.ts b/packages/theme/src/services/i18n/i18n-url.guard.ts
@@ -1,39 +1,49 @@
-import { Inject, Injectable, Optional } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Inject, Injectable, Optional, inject } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivateChildFn, CanActivateFn } from '@angular/router';
 import { Observable, of } from 'rxjs';
 
 import { AlainConfigService } from '@delon/util/config';
 
 import { AlainI18NService, ALAIN_I18N_TOKEN } from './i18n';
 
 @Injectable({ providedIn: 'root' })
-export class AlainI18NGuard implements CanActivate, CanActivateChild {
+export class AlainI18NGuardService {
   constructor(
     @Optional()
     @Inject(ALAIN_I18N_TOKEN)
     private i18nSrv: AlainI18NService,
     private cogSrv: AlainConfigService
   ) {}
 
-  private resolve(route: ActivatedRouteSnapshot): Observable<boolean> {
+  process(route: ActivatedRouteSnapshot): Observable<boolean> {
     const lang = route.params && route.params[this.cogSrv.get('themeI18n')?.paramNameOfUrlGuard ?? 'i18n'];
     if (lang != null) {
       this.i18nSrv.use(lang);
     }
     return of(true);
   }
+}
 
-  canActivateChild(
-    childRoute: ActivatedRouteSnapshot,
-    _: RouterStateSnapshot
-  ): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
-    return this.resolve(childRoute);
-  }
+/**
+ * Simple 路由守卫, [ACL Document](https://ng-alain.com/auth/guard).
+ *
+ * ```ts
+ * data: {
+ *  path: 'home',
+ *  canActivate: [ alainI18nCanActivate ]
+ * }
+ * ```
+ */
+export const alainI18nCanActivate: CanActivateFn = childRoute => inject(AlainI18NGuardService).process(childRoute);
 
-  canActivate(
-    route: ActivatedRouteSnapshot,
-    _: RouterStateSnapshot
-  ): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
-    return this.resolve(route);
-  }
-}
+/**
+ * Simple 路由守卫, [ACL Document](https://ng-alain.com/auth/guard).
+ *
+ * ```ts
+ * data: {
+ *  path: 'home',
+ *  canActivateChild: [ alainI18nCanActivateChild ]
+ * }
+ * ```
+ */
+export const alainI18nCanActivateChild: CanActivateChildFn = route => inject(AlainI18NGuardService).process(route);
diff --git a/packages/theme/src/services/i18n/i18n.spec.ts b/packages/theme/src/services/i18n/i18n.spec.ts
@@ -7,7 +7,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AlainConfig, ALAIN_CONFIG } from '@delon/util/config';
 
 import { AlainI18NService, ALAIN_I18N_TOKEN } from './i18n';
-import { AlainI18NGuard } from './i18n-url.guard';
+import { alainI18nCanActivate, alainI18nCanActivateChild } from './i18n-url.guard';
 import { AlainThemeModule } from '../../theme.module';
 
 describe('theme: i18n', () => {
@@ -93,8 +93,8 @@ describe('theme: i18n', () => {
             {
               path: ':i18n',
               component: TestComponent,
-              canActivate: [AlainI18NGuard],
-              canActivateChild: [AlainI18NGuard]
+              canActivate: [alainI18nCanActivate],
+              canActivateChild: [alainI18nCanActivateChild]
             }
           ])
         ],
@@ -114,7 +114,7 @@ describe('theme: i18n', () => {
         imports: [
           AlainThemeModule.forRoot(),
           RouterTestingModule.withRoutes([
-            { path: ':invalid', component: TestComponent, canActivate: [AlainI18NGuard] }
+            { path: ':invalid', component: TestComponent, canActivate: [alainI18nCanActivate] }
           ])
         ],
         declarations: [TestComponent]
@@ -132,7 +132,9 @@ describe('theme: i18n', () => {
       TestBed.configureTestingModule({
         imports: [
           AlainThemeModule.forRoot(),
-          RouterTestingModule.withRoutes([{ path: ':lang', component: TestComponent, canActivate: [AlainI18NGuard] }])
+          RouterTestingModule.withRoutes([
+            { path: ':lang', component: TestComponent, canActivate: [alainI18nCanActivate] }
+          ])
         ],
         declarations: [TestComponent],
         providers: [{ provide: ALAIN_CONFIG, useValue: { themeI18n: { paramNameOfUrlGuard: 'lang' } } as AlainConfig }]

diff --git a/src/app/routes/routes.module.ts b/src/app/routes/routes.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Route, RouterModule } from '@angular/router';
 
-import { AlainI18NGuard } from '@delon/theme';
+import { alainI18nCanActivate } from '@delon/theme';
 
 import { NotFoundComponent } from './404/404.component';
 import { HomeComponent } from './home/home.component';
@@ -14,7 +14,7 @@ const routes: Route[] = [
   {
     path: '',
     component: LayoutComponent,
-    canActivateChild: [AlainI18NGuard],
+    canActivateChild: [alainI18nCanActivate],
     children: [
       { path: '', redirectTo: 'en', pathMatch: 'full' },
       { path: ':lang', component: HomeComponent, data: { titleI18n: 'slogan' } },