Angular2 ngrx/store 多次登录尝试
Angular2 ngrx/store with multiple login attempts
在查看几个 ngrx 示例 (https://github.com/SekibOmazic/ngrx-auth-example) and (https://github.com/ngrx/angular2-store-example) 时,他们都创建了对商店的订阅,然后进行 REST API 调用。
我已将他们的代码修改为 return 错误,但订阅仍然完好无损(例如 return 在尝试登录时出现 404)。我可以在控制台中看到错误,但我可以再次登录。
在我的代码中,我有几乎相同的设置,但失败的登录响应会终止我的订阅(据我所知)。
我需要什么魔法才能让 4XX 错误响应代码不终止我的订阅?
private actions$ = new BehaviorSubject<Action>({ type: actions.INIT, payload: null })
constructor(
public http: Http,
private store: Store<AppStore>
) {
let logins = this.actions$
.filter(action => { debug('ACTION', action); return action.type === actions.LOGIN_USER })
.do(() => { debug('DISPATCH'); this.store.dispatch({ type: actions.LOGIN_REQUEST }) })
.mergeMap(action => this.http.post('/auth/login', JSON.stringify(action.payload)))
.share();
let loginSuccess$ = logins
.filter((payload: IResponse) => payload.data.token !== null)
.map((payload: IResponse) => ({ type: actions.USER_AUTHENTICATED, payload: payload.data }));
let loginFailure$ = logins
.filter((payload: IResponse) => payload.data.token === null)
.map((payload: IResponse) => ({ type: actions.LOGIN_FAILURE, payload: payload.data }));
Observable
.merge(loginSuccess$, loginFailure$)
.subscribe((action: Action) => this.store.dispatch(action))
}
login(payload: ILogin) {
this.actions$.next({ type: actions.LOGIN_USER, payload });
}
这更多地与 RxJS 本身有关,而不是与 ngrx 相关。错误将结束流,除非您 a) 在 .subscribe(next, err) 处理程序中处理它,或使用 .catch() 运算符或类似的。
例如
let loginFailures$ = http.get('failurl')
.map(res => res.json())
//handle error with catch
.catch(err => {
//return a 'fixed' observable
return Observable.of({ type: actions.LOGIN_FAILURE, payload: err })
})
.subscribe(action => store.dispatch(action));
在查看几个 ngrx 示例 (https://github.com/SekibOmazic/ngrx-auth-example) and (https://github.com/ngrx/angular2-store-example) 时,他们都创建了对商店的订阅,然后进行 REST API 调用。
我已将他们的代码修改为 return 错误,但订阅仍然完好无损(例如 return 在尝试登录时出现 404)。我可以在控制台中看到错误,但我可以再次登录。
在我的代码中,我有几乎相同的设置,但失败的登录响应会终止我的订阅(据我所知)。
我需要什么魔法才能让 4XX 错误响应代码不终止我的订阅?
private actions$ = new BehaviorSubject<Action>({ type: actions.INIT, payload: null })
constructor(
public http: Http,
private store: Store<AppStore>
) {
let logins = this.actions$
.filter(action => { debug('ACTION', action); return action.type === actions.LOGIN_USER })
.do(() => { debug('DISPATCH'); this.store.dispatch({ type: actions.LOGIN_REQUEST }) })
.mergeMap(action => this.http.post('/auth/login', JSON.stringify(action.payload)))
.share();
let loginSuccess$ = logins
.filter((payload: IResponse) => payload.data.token !== null)
.map((payload: IResponse) => ({ type: actions.USER_AUTHENTICATED, payload: payload.data }));
let loginFailure$ = logins
.filter((payload: IResponse) => payload.data.token === null)
.map((payload: IResponse) => ({ type: actions.LOGIN_FAILURE, payload: payload.data }));
Observable
.merge(loginSuccess$, loginFailure$)
.subscribe((action: Action) => this.store.dispatch(action))
}
login(payload: ILogin) {
this.actions$.next({ type: actions.LOGIN_USER, payload });
}
这更多地与 RxJS 本身有关,而不是与 ngrx 相关。错误将结束流,除非您 a) 在 .subscribe(next, err) 处理程序中处理它,或使用 .catch() 运算符或类似的。
例如
let loginFailures$ = http.get('failurl')
.map(res => res.json())
//handle error with catch
.catch(err => {
//return a 'fixed' observable
return Observable.of({ type: actions.LOGIN_FAILURE, payload: err })
})
.subscribe(action => store.dispatch(action));