Question

我目前正在从AngularJS转换为Angular6，但找不到该问题的任何解决方案。

在哪里最好的做法是保持需要在角度应用加载的每个页面上运行的应用逻辑？

示例逻辑基于存储在计算机上的cookie登录用户。我应该在哪里将该逻辑检查cookie并登录用户？

到目前为止，我所见过的最好的地方是app.component.ts。我以前在AngularJS中通过在所有页面上加载GlobalController，然后加载HomepageController等来实现此目的，该加载将为插入页面的特定“部分”加载。

e /需要说明的是，这只是一个示例，并不是我需要在每个页面上运行的唯一业务逻辑。我需要每隔约10秒钟触发一次后端请求，以检查服务器上的计时器（用于应用程序超时/等）。

Answer 1

您应该将该逻辑放入 app.components.ts

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    // here goes your logic
}

Answer 2

您可以在应用中创建一个身份验证服务（auth.service.ts）并将其设置为单例，该服务将包含所有身份验证操作，例如（登录，注销，getProfile ...），然后您可以将该服务注入并在需要时在应用程序中的任何地方使用它。

我建议您将应用程序分成模块，并创建一个用于身份验证的模块。

对于共享的所有内容，您都可以创建一个共享模块，其中包含共享的组件，服务，管道，拦截器...

Answer 3

我会使用Angular service，并且会从app.component调用它

说

服务是在不共享的类之间共享信息的好方法彼此认识。

Answer 4

这是通过使用AuthenticationService和CanActivate路由保护程序解决特定问题的示例。下方的守卫可以绑定到您喜欢的任何路线（页面）上，无论是其中一个还是全部。

@Injectable()
class AuthenticationService {
  constructor () { }

  isLoggedIn() {
    // check your cookie logic here
  }
}

@Injectable()
class AuthenticationGuard implements CanActivate {

  constructor(private authenticationService: AuthenticationService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authenticationService.isLoggedIn()
      .pipe(
        tap(loggedIn => {
          if (!loggedIn) {
            this.router.navigate(['/login'], {
              queryParams: {
                nextUrl: state.url
              }
            });
          }
        })
      );
  }
}

@NgModule({
  ...
  imports: [
    RouterModule.forRoot([
      { path: 'dummyRoute/', loadChildren: './components/dummyModule/dummy.module#DummyModule', canActivate: [ AuthenticationGuard ] },
    ])
  ],
  ...
})
export class AppModule {}

虽然使用AppComponent在每个页面上运行代码都是一种解决方案，但我只建议将其作为最后的选择。在大多数情况下，与Services结合使用的Guards（用于授权导航步骤），Resolvers（用于检索页面优先加载所需的数据）和Interceptor（用于更改/过滤HttpClient请求）可为您提供更优雅的方式解决这些问题并保持代码库井井有条。

这里有更多关于守卫的信息https://angular.io/guide/router#guards。

身份验证保护实现的完整示例：https://angular.io/guide/router#canactivate-requiring-authentication

在每个页面上运行的Angular6应用逻辑

4 个答案: