angular - 在 Angular 4 的服务中使用路由器

Question

我已经使用 Angular 2/4 大约一年了，我不断回到这个困境，是否将 Router 注入(inject)服务可以被视为一种不好的做法？

这是更多的架构问题。我相信没有确切的答案，但我想听听你的意见。所以这里有 2 个例子。

1. 考虑下一个代码。想象一下我们有一些组件，我们希望在执行某些操作后将用户重定向到特定的路由，例如用户添加了一个新实体，我们希望将他重定向回网格。

component.ts

constructor(private router: Router) {}

someAction() {
  // Some code here
  this.router.navigate(['/grid']);
}

这里我觉得用Router是完全没问题的，因为Router和Component都是UI层。

1. 现在假设我们有 auth.service.ts 并且它负责身份验证。我们希望能够从应用程序中注销用户，我们有 logout() 函数来执行此操作。

auth.service.ts

constructor(private router: Router) {}

logout() {
  // Cleanup token, storage, etc.
  this.router.navigate(['/login']);
}

所以从架构上思考:

1. 您如何看待在服务中使用这种路由器？
2. 您认为这是一种有效的方法吗？
3. 如果不是，在这种情况下您有什么建议？

例如，我正在考虑将 eventEmitter 放在 authService 上并在 app.component.ts 中订阅它，但仍然不确定是否这比在服务中使用它要好。

我很感激对这个案例的任何评论。非常感谢!

编辑

另一个例子:UI 是一个带有任务的日历。

有一项服务可以处理所有数据流并为日历提供数据。 Calendar 本身不要求数据，而是从服务订阅数据更改。

现在我需要将用户路由到与该日历不同的屏幕。想象一下下周/下月/下一年的用户点击。

此数据存储在路由 URL 中，因此用户可以在页面刷新后停留在同一天，但日历组件不知道天/周/月。

它们被封装在服务中。那么在这种情况下你会在服务中使用路由器吗？

Answer 1

TL;DR:从组件开始做总是更好，因为您可以看到移动部件在哪里，无论是在服务中都可以完成，但很难识别，因为您总是首先检查组件.

---

您可以为此目的使用 Guards 和拦截器，我添加了一个如下所示的错误拦截器，以便在我收到 401 时路由到注销:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpErrorResponse, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private router: Router) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).catch(
      (err: HttpErrorResponse) => {
        if (this.router.url !== '/login' && err.status === 401) {
          this.router.navigate(['/logout']);
        }
        return Observable.throw(err);
      }
    );
  }
}

在你的 app.module 中提供它，或者在我的例子中，我已经为所有单例创建了一个 core.module 来保持我的 app.module 干净

{
  provide: HTTP_INTERCEPTORS,
  useClass: ErrorInterceptor,
  multi: true
}

有了这样的东西，您不必将路由放在服务中，当 token 无效时，您将从您的 api 获得 401。

您可能需要对这段代码进行一些修改，尽量使其尽可能通用。