大佬教程收集整理的这篇文章主要介绍了angular2检查用户是否经过身份验证,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我从我的服务器获取一个令牌,并希望将其存储在本地存储中(除非有人更好地在应用程序中保留令牌).我遇到的主要问题是,当令牌发生变化时,我无法检测到组件中的变化.
通过阅读大约20个SO帖子/文章,我想我发现最好的方法是在我的user.service.ts中创建一个observable并订阅我的组件中的observable,当用户更改其令牌时我需要检测它.
方法#1 BehaviorSubject – Delegation: EventEmitter or Observable in Angular2
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; export class Userservice { // Observable userToken source _userToken = new BehaviorSubject<String>(""); // Observable userToken stream userToken$= this._userToken.asObservable(); // set the user token in a way that is observable for subscribed components setUserToken(token) { this._userToken.next(token); } ... } import {Subscription} from 'rxjs/Subscription'; export class NavBarComponent implements OnInit{ subscription: Subscription; ... ngOnInit(){ this.subscription = this._userservice.userToken$.subscribe( userToken => { console.log('setTing user token on navbar to ' + userToken); thiS.UserToken = userToken }); } } export class LoginComponent implements OnInit { ... ngOnInit() { /* Get the authentication code from twitch and then send that authentication code to the server. The server does stuff and then either passes BACk a 200 with key token in data,or passes BACk an error 4xxx code. */ var routeParams:any = this._routeParams.params if(routeParams.codE){ this.isLoading = true; this._userservice.authenticateTwitch(routeParams.codE) .subscribe(resp => { this._userservice.setUserToken(resp.key); this.isLoading = false; this._router.navigate(['Search']); }); } } }
好的,所以这个方法的问题是当LoginComponent触发this._userservice.setUserToken(resp.key)时,在NavbarComponent中看不到subscribe事件.初始化NavbarComponent时,会触发subscribe方法中的console.log,但是当LoginComponent中的令牌发生更改时,它不会执行任何操作.
方法#1让我感觉很好,我认为这是正确的方法.这只是因为某些原因订阅没有获得更改.
方法#2订阅LocalStorage Change – How can I watch for changes to localStorage in Angular2?(和问题中附带的plunker)
这里我使用“angular2-localstorage”直接使用本地存储:“^ 0.4.0”.我创建一个新服务来处理本地存储更改,然后在我的组件中订阅该Observable
export class Storageservice { public userToken$: Observable<String>; private _userTokenObserver; private _userToken; constructor() { this._userToken = ""; thiS.UserToken$= new Observable(observer => { this._userTokenObserver = observer; }).share(); } add(value: String) { console.log('setTing userToken to ' + value); this._userToken = value; this._userTokenObserver.next(this._userToken); } load() { this._userTokenObserver.next(this._userToken); } } export class NavbarComponent { ... ngOnInit() { console.log('navbar init'); this._storageservice.userToken$.subscribe(latestuserToken => { console.log('subscribe fired on navbar with latest user token: ',latestuserToken); thiS.UserToken = latestuserToken; console.log('user token on nav component is Now: ',thiS.UserToken); }); this._storageservice.load(); } }
我的LoginComponent中也有类似的ngOnInit代码.这个方法很有意思,因为Subscribe有点在LoginComponent中工作,但在NavbarComponent中却没有.
我说“有点”因为我不认为订阅实际上有效.看起来NavbarComponent首先被初始化并且令牌没有准备好,而LoginComponent在令牌可用之后被初始化.如果令牌发生更改(例如注销并清除令牌),则subscribe方法不会获取更改.
…至少在LoginComponent上!注销在NavbarComponent上,订阅事件在NavbarComponent上触发.因此,事件似乎只包含在发生它的组件中,而不是共享给订阅该事件的所有组件.
navbar init navbar.component.ts:34 subscribe fired on navbar with latest user token: navbar.component.ts:36 user token on nav component is Now: login init user.service.ts:31 authenticaTing against server with twitch token: aaaaa storage.service.ts:19 setTing userToken to bbbbb login.component.ts:42 subscribe fired in login componenet with latest usertoken: bbbbb login.component.ts:44 use
其他想法
我认为这些问题的一个可能原因是我的所有组件都是通过RouterOutlet呈现的,而我的NavbarComponent是在app.template.html中直接呈现的.但是,我尝试将导航栏移动到我的组件中,但它仍然具有相同的行为.
<!-- app.template.html --> <hero-navbar></hero-navbar> <router-outlet></router-outlet>
另一件事可能是订阅不应该进入ngOnInit函数.似乎代码运行一次,但之后不再运行.我认为问题更多的是潜在的观察者/订阅关系,尽管……
如果您已经阅读了整篇文章,我向您表示祝贺,并深深感谢您花时间阅读本文,这是迄今为止我最长的帖子.如果我能提供更多信息以帮助提出如何解决此问题的想法,请告诉我.
当用户登录时,我将令牌保存在本地存储中并在我的AppState上将属性’isAuthenticated’设置为true.我还将该属性传递给app.component.html中的标题.这样,只要用户登录/注销,您的标头就会自动更新.
app.component.ts:
constructor(public appState: AppStatE) { appState.state.isAuthenticated = false; }
app.component.html:
<navbar [isAuthenticated]="appState.state.isAuthenticated"></navbar>
navbar.component.ts:
@input() isAuthenticated:Boolean;
auth.service.ts:
return this.http.post(this.baseUrl,body,{ headers }).subscribe((result) => { localStorage.setItem('oauth',JSON.Stringify(result.json())); this.appState.set('isAuthenticated',truE); return result; });
我希望这有帮助!
以上是大佬教程为你收集整理的angular2检查用户是否经过身份验证全部内容,希望文章能够帮你解决angular2检查用户是否经过身份验证所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。