Question

因此，我在LocalStorage中有一个项目，并且基于该项目是否存在，我想在NavBar上显示锚点（注销）。现在我的台词看起来像这样：

<a href='#' *ngIf='!loggedIn' (click)='logOut()'>Log Out</a>

其中loggedIn是打字稿文件中用于获取项目的变量。

public loggedIn = localStorage.getItem('loggedIn');

在登录页面上一切正常，但是登录后仍然没有显示锚。有解决方案吗？

Answer 1

问题在于，loggedIn在应用程序启动时初始化一次。但是，它不侦听LocalStorage的更改。您需要创建一个更新变量的事件。

一种使用Observables的方式：

您可以创建一个AuthService，它具有方法login()，logout()和一个公共的Observable变量isLoggedIn$。

@Injectable({providedIn: 'root'})
export class AuthService {
  public isLoggedIn$: BehaviorSubject<boolean>;

  constructor() {
    const isLoggedIn = localStorage.getItem('loggedIn') === 'true';
    this.isLoggedIn$ = new BehaviorSubject(isLoggedIn);
  }

  login() {
    // logic
    this.isLoggedIn$.next(true);
  }

  logout() {
    // logic
    this.isLoggedIn$.next(false);
  }
}

当调用login或logout时，您emit的{{1}}可观察值。然后，您可以使用异步管道读取Observable的值：

在组件中注入isLoggedIn$

AuthService

在模板中使用它：

constructor(public authService: AuthService) {}

看看这个有效的example。

Answer 2

<ul *ngIf="userCheck; else not_found" class="nav navbar-nav navbar-right">
    <li><a (click)="logout()" href="/">Logout</a></li>
</ul>
<ng-template #not_found>
    // do anything
</ng-template>

如果用户已登录，则userCheck为true，否则为false。

Answer 3

更简单的是使用吸气剂

get loggedIn()
{
    return localStorage.getItem('loggedIn') === 'true';
}

Answer 4

在您的.ts文件中

authCheck() { return this.service.isAuthenticated(); }

其中：

service是您的服务，用于基于localStorage检查身份验证，该函数返回true或false

然后在您的html中：

<ng-container *ngIf="authCheck(); then authenticatedTemplate; else unauthenticatedTemplate"></ng-container>

<a #authenticatedTemplate (click)='logOut()'>Log Out</a>

仅在用户登录* ngIf

4 个答案: