Угловой 2 - JWT auth

Question

Я использую RC1 с новым маршрутизатором (не устаревшим).

Я читал большую часть блогов и догадывался там, но я действительно не мог найти идиоматический способ сделать это, особенно не с «новым» маршрутизатором. До сих пор я мое приложение работает «отлично», просто не хватает пару вещей:

1. Как я должен идти о добавлении маркера в Authorization заголовка на одного запроса каждый HTTP? (Как перехватчик в Angular 1.x.)
2. Как перехватить любой ответ 40x и если необходимо (что означает, что маршрут защищен) перейдите к другому URL-адресу?
3. Как настроить маршруты (или компоненты), чтобы приложение переходило к URL-адресу входа, если пользователь не вошел в систему?
4. Бонус: Идиоматично загружать основные пользовательские данные в контрструктуру основного компонента?

Мне не нужна полная демоверсия или что-то в этом роде, просто пара пулевых точек, где я должен возглавить.

Answer 1

мне пришлось иметь дело с теми же проблемами, не так давно, и придумал следующее решение. Я не знаю, является ли это лучшей практикой, и мне очень понравились перехватчики Angular 1 в качестве решения для этого, но это работает для меня:

Я создал службу обертки для встроенного сервиса Http. Когда я хочу использовать Http, я вместо этого ввожу эту службу.

@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)}`); 
     } 
    } 
} 

* Обратите внимание, что я использую устаревший маршрутизатор. Я жду, когда угловая команда задокументирует новую.

Я думаю, что это в значительной степени отвечает вашим вопросам 1-3. Что касается вопроса о бонусе, это скорее вопрос использования. Если вы знаете, что собираетесь использовать данные пользователя в любом случае, то предварительная загрузка данных пользователя имеет смысл. В противном случае, чтобы не перегружать приложение в начале, вы можете загружать эти данные только тогда, когда это необходимо.

Answer 2

Вы можете посмотреть Angular 2 Auth, который реализует базовый токен auth и занимается маршрутизацией на страницу входа в случае несанкционированного доступа. Это для устаревшего маршрутизатора (я думаю), но вы поняли эту идею.

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