加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

隐藏基于Authentication Angular 2的链接

发布时间:2020-12-17 17:28:17 所属栏目:安全 来源:网络整理
导读:我试图在没有页面刷新的情况下立即隐藏基于用户身份验证的Navbar链接 AppComponent.html div class="content" md-toolbar md-iconmenu/md-icon span class="fill-space"/span button md-icon-buttonmd-iconsearch/md-icon/button md-input-container input m
我试图在没有页面刷新的情况下立即隐藏基于用户身份验证的Navbar链接

AppComponent.html

<div class="content">
    <md-toolbar>
        <md-icon>menu</md-icon>
        <span class="fill-space"></span>
        <button md-icon-button><md-icon>search</md-icon></button>
        <md-input-container>
            <input mdInput name="search" #search placeholder="Search">
        </md-input-container>

        <button md-raised-button color="primary" (click)="OpenLoginDialog()" *ngIf="!isAuthenticated">Login</button>
        <button md-raised-button (click)="OpenSignupDialog()" *ngIf="!isAuthenticated">Signup</button>
        <button md-raised-button (click)="Logout()" *ngIf="isAuthenticated">Logout</button>
    </md-toolbar>
</div>

验证服务

import { Injectable } from "@angular/core";
import { Observable } from "Rxjs";
import { Http,Headers } from "@angular/http";
import { User } from "./UserModel";

@Injectable()
export class AuthenticationService {
    isLoggedin: boolean = false;

redirectUrl: string;
constructor(private http: Http) { }
login(model: User) {
    debugger;
    let headers = new Headers({ 'Content-Type': 'application/json' });
    return this.http.post("/Account/Login",JSON.stringify({ model }),{ headers: headers }).map(res => res.json()).map(res => {
        debugger;

        if (res.isSuccess) {
            localStorage.setItem("auth_token",res.UserInfo);
            this.isLoggedin = true;
        }
        return res.isSuccess;
    });



}
logout(): void
{
    localStorage.removeItem('auth_token');
    this.isLoggedin = false;
} 
isLoggedIn() {
    debugger;
    if (localStorage.getItem("auth_token") == null) {
        this.isLoggedin = false;
        return this.isLoggedin;
    }
    else {
        return true;
    }
}
}

App.Component

import { Component,OnInit } from "@angular/core";
import { FormBuilder,FormControl,FormGroup,Validators } from '@angular/forms';
import { Validate } from "./Custom.Validator";
import { MdDialog } from "@angular/material";
import { DialogComponent } from "./Dialog.Component";
import { LoginComponent } from "./Login.Component";
import { SignupComponent } from "./Signup.Component";
import { AuthenticationService } from "./Authentication.Service";
@Component({
    selector: 'app-main',templateUrl: "../App/App.html",styles: [`div {
    padding: 1rem;
  }`]
})

export class AppComponent implements OnInit {
    selectedEmoji: string;
    isAuthenticated: boolean;
    myForm: FormGroup;
    constructor(private fb: FormBuilder,public dialog: MdDialog,public authService: AuthenticationService) { }
    ngOnInit() {
        this.myForm = this.fb.group({
            state: ['',Validators.required],zip: ['',[Validators.required,Validate]],});
        this.isLoggedIn();
    }
    openEmojiDialog() {
        let dialog = this.dialog.open(DialogComponent);
        dialog.afterClosed().subscribe(selection => {
            if (selection) {
                this.selectedEmoji = selection;

            }
            else {

            }
        });
    }
    OpenLoginDialog() {
        let dialog = this.dialog.open(LoginComponent);
    }
    OpenSignupDialog() {
        let dialog = this.dialog.open(SignupComponent);
    }
    Logout() {
        this.authService.logout();
    }
    isLoggedIn()
    {
        this.isAuthenticated = this.authService.isLoggedIn();
    }
}

链接仅在页面刷新后隐藏,但我希望它在用户身份验证后立即隐藏

解决方法

由于您的身份验证服务中已经有一个功能,并且您已经将身份验证服务注入App.Component,因此请继续使用简单的* ngIf =“authService.isLoggedIn()”,而不是在应用程序中创建本地变量.数据将变得陈旧的组件.

在使用中它看起来像这样:

<li *ngIf="authService.isLoggedIn()">
  <a [routerLink]="['/path1']">Path 1</a>
</li>
<li *ngIf="authService.isLoggedIn()">
  <a [routerLink]="['/path2']">Path 2</a>
</li>

可以缩短使用您在身份验证服务中已有的变量来仅使用* ngIf =“authService.isLoggedin”.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读