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

我目前正在从AngularJS转换为Angular6，但没有找到任何解决这个问题的方法

在angular应用程序加载的每个页面上运行应用程序逻辑的最佳实践是什么

示例逻辑是基于机器上存储的cookie登录用户。我应该把这个逻辑放在哪里来检查cookie并让用户登录

到目前为止，我看到的最好的地方是

app.component.ts

。我曾经在AngularJS中通过在所有页面上加载一个

GlobalController

，然后加载一个

HomepageController

等来实现这一点，该控制器将加载插入页面的特定“部分”

---

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

您应该将该逻辑放入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
}

 @Injectable()
 export class MyHttpInterceptor implements HttpInterceptor {

   constructor() {}

      intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
         const token = 'my_token'; // retrieve token from your storage.
         const req = request.clone({
             setHeaders: {
               Authorization: `Bearer ${token}`
             }
           });

           return next.handle(req).do((event: HttpEvent<any>) => {
             // success
             if (event instanceof HttpResponse) {
             }
           }, (err: any) => {
             // failure
             if (err instanceof HttpErrorResponse) {
             }
           });
       }
 }

---

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

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

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

我将使用Angular，并从app.component调用它

上面说

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

---

下面是一个使用AuthenticationService和CanActivate route guard解决特定问题的示例。下面的守卫可以绑定到任何你喜欢的路线（页面），无论是一条还是全部

@Injectable（）
类身份验证服务{
构造函数（）{}
伊斯洛格丁（）{
//在这里检查cookie逻辑
}
}
@可注射（）
类AuthenticationGuard实现了CanActivate{
构造函数（私有authenticationService:authenticationService，私有路由器：路由器）{}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回此.authenticationService.isLoggedIn（）文件
.烟斗(
点击（loggedIn=>{
如果（！loggedIn）{
this.router.navigate（['/login']{
查询参数：{
nextUrl:state.url
}
});
}
})
);
}
}
@NGD模块({
...
进口：[
RouterModule.forRoot([
{path:'dummyRoute/'，loadChildren:'./components/dummyModule/dummy.module#dummyModule'，可以激活：[AuthenticationGuard]}，
])
],
...
})
导出类AppModule{}

以验证Http请求。您可以使用HttpInterceptors为API的每个请求附加一个令牌。类似这样的东西->

我的http.interceptor.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
}

 @Injectable()
 export class MyHttpInterceptor implements HttpInterceptor {

   constructor() {}

      intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
         const token = 'my_token'; // retrieve token from your storage.
         const req = request.clone({
             setHeaders: {
               Authorization: `Bearer ${token}`
             }
           });

           return next.handle(req).do((event: HttpEvent<any>) => {
             // success
             if (event instanceof HttpResponse) {
             }
           }, (err: any) => {
             // failure
             if (err instanceof HttpErrorResponse) {
             }
           });
       }
 }

---

RouteGuards可用于出于任何原因阻止某些路由-用户未经授权，用户没有适当的角色访问，等等

---

如果要在路由更改上执行逻辑，可以在router.events上侦听

---

编辑： 正如该线程中的其他人所指出的，始终将业务逻辑放在服务中

---

要获得最佳实践角度应用程序结构->

问得好！嗯，我想这取决于你想做什么样的共同行动。。。例如，正如您所说，我一直在

app.component

中保存共享逻辑，这是放置始终运行逻辑的最佳位置。但是对于涉及cookie检查或类似的内容，我总是将所有要检查的方法都放在一个表中。当然，如果它需要一直运行，我会在应用程序组件上调用它。不，你不应该这样做。这是个坏习惯。也许对于个人项目来说，这不是什么大不了的事。如果你正在从事一个专业项目，你不应该这样做。