Góc 2 - JWT auth

Question

Tôi đang sử dụng RC1 với bộ định tuyến mới (không phải bộ định tuyến không được chấp nhận).

Tôi đã đọc hầu hết các blog và tài liệu trên mạng, nhưng tôi thực sự không thể tìm thấy một cách thành ngữ để làm điều đó, đặc biệt không phải với bộ định tuyến "mới". Cho đến nay tôi đã ứng dụng của tôi làm việc "một cách hoàn hảo", chỉ còn thiếu một vài điều:

1. Làm thế nào tôi nên đi về việc thêm các dấu hiệu cho Authorization tiêu đề trên mỗi yêu cầu http đơn? (Giống như một kẻ đánh chặn trong Angular 1.x.)
2. Làm cách nào tôi có thể chặn bất kỳ phản hồi 40x nào và nếu cần thiết (có nghĩa là tuyến đường được bảo vệ) điều hướng đến một url khác?
3. Làm cách nào để thiết lập tuyến đường (hoặc thành phần) để ứng dụng sẽ điều hướng đến url đăng nhập nếu người dùng chưa đăng nhập?
4. Phần thưởng: có phải là thành ngữ để tải dữ liệu người dùng cơ bản trong trình tạo thành phần chính không?

Tôi không cần bản trình diễn hoàn chỉnh hoặc bất kỳ thứ gì giống như vậy, chỉ cần một vài dấu đầu dòng nơi tôi nên đứng đầu.

Answer 1

Tôi phải giải quyết các vấn đề tương tự cách đây không lâu và đưa ra giải pháp sau. Tôi không biết liệu đó có phải là phương pháp hay nhất hay không và thực sự thích những kẻ đánh chặn của Angular 1 như một giải pháp cho việc này, nhưng điều này làm việc cho tôi:

Tôi đã tạo một dịch vụ bao bọc cho dịch vụ Http được tích hợp sẵn. Khi tôi muốn sử dụng Http Tôi sẽ tiêm dịch vụ này thay thế.

@Injectable() 
export class HttpWrapper { 
    constructor(private loginService:LoginService, private http:Http, private router:Router) { 
    } 

    get(url: string, options?: RequestOptionsArgs): Promise<Response> { 
     let promise: Promise<Response> = this.http.get(url, this.addHeaders(options)).toPromise(); 
     return new Promise((resolve, reject) => { 
      promise.then(success => { 
       resolve(success); 
      }, error => { 
       this.onError(error); 
       reject(error); 
      }); 
     }); 
    } 

    //... repeat the same concept for post, put, delete... 

    private addHeaders(otherOptions?: RequestOptionsArgs): RequestOptions { 
     let headers = new Headers({'Content-Type': 'application/json', token: this.loginService.token}); 
     let options = new RequestOptions({ headers: headers }); 
     if (otherOptions) { 
      options.merge(otherOptions); 
     } 
     return options; 
    } 

    private onError(reason) { 
     if(reason.status === 401) { 
      this.router.navigateByUrl(`/login?${encodeURIComponent(this.router.lastNavigationAttempt)}`); 
     } 
    } 
} 

* Lưu ý rằng tôi đang sử dụng bộ định tuyến không dùng nữa. Tôi đang đợi đội Angular ghi lại tài liệu mới một cách chính xác.

Tôi nghĩ rằng điều này khá nhiều câu trả lời cho câu hỏi của bạn 1-3. Đối với các câu hỏi tiền thưởng, nó là nhiều hơn một vấn đề của các trường hợp sử dụng. Nếu bạn biết bạn sẽ sử dụng dữ liệu của người dùng trong mọi trường hợp, thì việc tải trước dữ liệu của người dùng có ý nghĩa. Nếu không, để không làm quá tải ứng dụng ngay khi bắt đầu, bạn chỉ có thể tải dữ liệu này khi cần.

Answer 2

Bạn có thể nhìn vào phần mềm Autular 2 Auth, thực hiện xác thực mã thông báo cơ bản và giao dịch với định tuyến để đăng nhập trang trong trường hợp không được phép. Đó là cho các bộ định tuyến không được chấp nhận (tôi đoán) nhưng bạn có được ý tưởng.

https://github.com/teonite/angular2-auth