Angular 您如何知道身份验证状态何时更改?
Angular How do you know when Authentication Status changed?
我目前正在开发一个需要登录的网络应用程序。但是我的注销按钮有问题。注销按钮只应在您登录时显示,并在您注销时消失。
那是我的按钮(菜单-items.component):
<ul class="list-group">
<li *ngIf="isLoggedIn" (click)="onLogout()">Logout</li>
</ul>
代码(菜单-items.component):
import { Component, OnInit } from '@angular/core';
import { HttpService } from '../../http.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-menu-items',
templateUrl: './menu-items.component.html',
styleUrls: ['./menu-items.component.css']
})
export class MenuItemsComponent implements OnInit {
isLoggedIn: boolean = false;
constructor(private httpService: HttpService) {
}
ngOnInit() {
}
onSignout(){
this.isLoggedIn = false;
localStorage.removeItem('currentUser');
}
}
基本上,当我登录时,我希望 "isLoggedIn" 成为 "true"。
登录部分(login.component):
onSignin(){
const username = this.loginForm.get('username').value;
const password = this.loginForm.get('password').value;
this.httpServie.sendDataLogin("grant_type=password&username=" + username + "&password=" + password)
.subscribe(
data => {
this.token = JSON.parse(data["_body"]).access_token
this.username = JSON.parse(data["_body"]).userName
localStorage.setItem('currentUser', JSON.stringify({username: this.username, token: this.token}))
},
err => {
if (err.error instanceof Error) {
this.ServerErrorMsg = err.error.message;
} else {
const returnArray = [];
this.ServerErrorMsg = JSON.parse(err._body).error_description + "\n";
}
}
);
}
登录部分正在运行!我将我的数据发送到我的 API 并在 return 中我得到了我的令牌。
但问题是我如何告诉我的 isLoggedIn 布尔值我现在已经登录了?我想我需要一个 observable 或一些可以通过 subscribe 收听的东西,对吧?
我是 Angular 的新手,我不太了解可观察量。有谁能帮帮我吗?
我建议您在您的服务中(更好)或在您的组件中(没那么好)做一个 getter 方法,例如:
私有 _isLogged:boolean =false;
isLoggedIn(){
var local= localStorage.getItem('currentUser');
var token= JSON.Parse(local) as any;
return local && token && token.access_token;
}
onSignin(){
const username = this.loginForm.get('username').value;
const password = this.loginForm.get('password').value;
this.httpServie.sendDataLogin("grant_type=password&username=" + username + "&password=" + password)
.subscribe(
data => {
this.token = JSON.parse(data["_body"]).access_token
this.username = JSON.parse(data["_body"]).userName
localStorage.setItem('currentUser', JSON.stringify({username: this.username, token: this.token}));
this._isLogged = 真; //<-- 将其设置为 true
},
err => {
if (err.error instanceof Error) {
this.ServerErrorMsg = err.error.message;
} else {
const returnArray = [];
this.ServerErrorMsg = JSON.parse(err._body).error_description + "\n";
}
}
);
}
然后在您的代码中:
<ul class="list-group">
<li *ngIf="isLoggedIn()" (click)="onLogout()">Logout</li>
</ul>
希望对您有所帮助!
我相信您在成功登录后忘记更新 isLoggedIn 变量。
试试这个
subscribe(
data => {
this.token = JSON.parse(data["_body"]).access_token
this.username = JSON.parse(data["_body"]).userName
localStorage.setItem('currentUser', JSON.stringify({username: this.username, token: this.token}))
this.isLoggedIn=true;
}
我目前正在开发一个需要登录的网络应用程序。但是我的注销按钮有问题。注销按钮只应在您登录时显示,并在您注销时消失。
那是我的按钮(菜单-items.component):
<ul class="list-group">
<li *ngIf="isLoggedIn" (click)="onLogout()">Logout</li>
</ul>
代码(菜单-items.component):
import { Component, OnInit } from '@angular/core';
import { HttpService } from '../../http.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-menu-items',
templateUrl: './menu-items.component.html',
styleUrls: ['./menu-items.component.css']
})
export class MenuItemsComponent implements OnInit {
isLoggedIn: boolean = false;
constructor(private httpService: HttpService) {
}
ngOnInit() {
}
onSignout(){
this.isLoggedIn = false;
localStorage.removeItem('currentUser');
}
}
基本上,当我登录时,我希望 "isLoggedIn" 成为 "true"。
登录部分(login.component):
onSignin(){
const username = this.loginForm.get('username').value;
const password = this.loginForm.get('password').value;
this.httpServie.sendDataLogin("grant_type=password&username=" + username + "&password=" + password)
.subscribe(
data => {
this.token = JSON.parse(data["_body"]).access_token
this.username = JSON.parse(data["_body"]).userName
localStorage.setItem('currentUser', JSON.stringify({username: this.username, token: this.token}))
},
err => {
if (err.error instanceof Error) {
this.ServerErrorMsg = err.error.message;
} else {
const returnArray = [];
this.ServerErrorMsg = JSON.parse(err._body).error_description + "\n";
}
}
);
}
登录部分正在运行!我将我的数据发送到我的 API 并在 return 中我得到了我的令牌。
但问题是我如何告诉我的 isLoggedIn 布尔值我现在已经登录了?我想我需要一个 observable 或一些可以通过 subscribe 收听的东西,对吧? 我是 Angular 的新手,我不太了解可观察量。有谁能帮帮我吗?
我建议您在您的服务中(更好)或在您的组件中(没那么好)做一个 getter 方法,例如:
私有 _isLogged:boolean =false;
isLoggedIn(){
var local= localStorage.getItem('currentUser');
var token= JSON.Parse(local) as any;
return local && token && token.access_token;
}
onSignin(){
const username = this.loginForm.get('username').value;
const password = this.loginForm.get('password').value;
this.httpServie.sendDataLogin("grant_type=password&username=" + username + "&password=" + password)
.subscribe(
data => {
this.token = JSON.parse(data["_body"]).access_token
this.username = JSON.parse(data["_body"]).userName
localStorage.setItem('currentUser', JSON.stringify({username: this.username, token: this.token}));
this._isLogged = 真; //<-- 将其设置为 true
},
err => {
if (err.error instanceof Error) {
this.ServerErrorMsg = err.error.message;
} else {
const returnArray = [];
this.ServerErrorMsg = JSON.parse(err._body).error_description + "\n";
}
}
);
}
然后在您的代码中:
<ul class="list-group">
<li *ngIf="isLoggedIn()" (click)="onLogout()">Logout</li>
</ul>
希望对您有所帮助!
我相信您在成功登录后忘记更新 isLoggedIn 变量。
试试这个
subscribe(
data => {
this.token = JSON.parse(data["_body"]).access_token
this.username = JSON.parse(data["_body"]).userName
localStorage.setItem('currentUser', JSON.stringify({username: this.username, token: this.token}))
this.isLoggedIn=true;
}