Javascript 如何使页面即使在刷新后也能使用注销

我有主页，其中有登录和注销栏。 我有一个用户页面，其中还有一个注册表单。 现在，如果我注销，它可以正常工作，但一旦我刷新页面，它仍然可以工作，因为用户仍然没有注销。 有人能帮我解决我的问题吗

用户页面的HTML:

<ul>
<li class="signUp" *ngIf = "loggedIn">{{userName}}</li>
<li class="signIn" (click)="signOut()" *ngIf = "loggedIn">Sign Out</li>
<li class="signUp" (click)="openSignUp(user)"  *ngIf = "!loggedIn">Sign Up</li>
<li class="signIn" (click)="openSignIn(logedin)"  *ngIf = "!loggedIn">Sign In</li>
</ul>

**In service:** 



 private signOutSource = new Subject<any>(); 
    signoutDone$ = this.signOutSource.asObservable(); 

signOut() { 
this.signOutSource.next(); 
} 

 <div class="favourate" *ngIf="!loggedIn">
    <h1>User</h1>
    <hr />
    <div class="backImage">
      <form name="signUpForm" class="signUpForm" #signUpForm="ngForm" novalidate>
        <div class="form-group">
          <h3>Sign Up</h3>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>perm_identity</mat-icon>
            <input matInput type="text" placeholder="Name" name="name" [(ngModel)]="name" #Name="ngModel" required>
          </mat-form-field>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>email</mat-icon>
            <input matInput type="email" placeholder="Email" name="email" [(ngModel)]="user.email" #Email="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required>
          </mat-form-field>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>lock</mat-icon>
            <input matInput type="password" placeholder="Password" name="password" [(ngModel)]="user.password" #Password="ngModel" required>
          </mat-form-field>
        </div>          
      </form>
    </div>
  </div>

User.componet:

export class HomeComponent implements OnDestroy { 
constructor(private ApiService:ApiService) { 
this.subscription = ApiService.signinDone$.subscribe( 
user => { 
this.userName = user.name; 
localStorage.setItem('loggedin', 'true'); 
localStorage.setItem('user', JSON.stringify(user)); 
this.loggedIn = true; 
this.isLoadingSignUp = false; 
this.ApiService.getUserData(user); 
}); 
if(localStorage.getItem('loggedin')){ 
this.loggedIn = true; 
} else { 
this.loggedIn = false; 
} 
if(localStorage.getItem('user')){ 
this.userName = JSON.parse(localStorage.getItem('user')).name; 
} 
this.logoutSubscription = ApiService.signoutDone$.subscribe( 
user => { 
localStorage.setItem('loggedin', 'false'); 
this.loggedIn = false; 
this.ApiService.getUserData({}); 
}); 
} 

ngOnDestroy() { 
this.subscription.unsubscribe(); 
} 

signOut() { 
this.ApiService 
.logout() 
.subscribe( 
user => { 
localStorage.removeItem('user'); 
localStorage.removeItem('loggedin'); 
this.ApiService.getUserData({}); 
this.loggedIn = false; 
this.router.navigate(['/home']); 
this.toasterService.pop('success', 'SignOut Successfull'); 
this.ApiService.signOut(); 
},error => { 
if(error.data && error.data.length > 0) { 
this.toasterService.pop('error', error.data); 
} else { 
this.toasterService.pop('error', 'Something went wrong!'); 
} 
}); 
} 

} 

export class UserComponent implements OnDestroy { 
constructor(private ApiService:ApiService) { 
this.subscription = ApiService.signinDone$.subscribe( 
user => { 
this.userName = user.name; 
localStorage.setItem('loggedin', 'true'); 
localStorage.setItem('user', JSON.stringify(user)); 
this.loggedIn = true; 
this.isLoadingSignUp = false; 
this.ApiService.getUserData(user); 
}); 
if(localStorage.getItem('loggedin')){ 
this.loggedIn = true; 
} else { 
this.loggedIn = false; 
} 
if(localStorage.getItem('user')){ 
this.userName = JSON.parse(localStorage.getItem('user')).name; 
} 
this.logoutSubscription = ApiService.signoutDone$.subscribe( 
user => { 
localStorage.setItem('loggedin', 'false'); 
this.loggedIn = false; 
this.ApiService.getUserData({}); 
}); 
} 

ngOnDestroy() { 
this.subscription.unsubscribe(); 
} 

}

用户页面的HTML:

<ul>
<li class="signUp" *ngIf = "loggedIn">{{userName}}</li>
<li class="signIn" (click)="signOut()" *ngIf = "loggedIn">Sign Out</li>
<li class="signUp" (click)="openSignUp(user)"  *ngIf = "!loggedIn">Sign Up</li>
<li class="signIn" (click)="openSignIn(logedin)"  *ngIf = "!loggedIn">Sign In</li>
</ul>

**In service:** 



 private signOutSource = new Subject<any>(); 
    signoutDone$ = this.signOutSource.asObservable(); 

signOut() { 
this.signOutSource.next(); 
} 

 <div class="favourate" *ngIf="!loggedIn">
    <h1>User</h1>
    <hr />
    <div class="backImage">
      <form name="signUpForm" class="signUpForm" #signUpForm="ngForm" novalidate>
        <div class="form-group">
          <h3>Sign Up</h3>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>perm_identity</mat-icon>
            <input matInput type="text" placeholder="Name" name="name" [(ngModel)]="name" #Name="ngModel" required>
          </mat-form-field>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>email</mat-icon>
            <input matInput type="email" placeholder="Email" name="email" [(ngModel)]="user.email" #Email="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required>
          </mat-form-field>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>lock</mat-icon>
            <input matInput type="password" placeholder="Password" name="password" [(ngModel)]="user.password" #Password="ngModel" required>
          </mat-form-field>
        </div>          
      </form>
    </div>
  </div>

使用者

注册
perm_恒等式
电子邮件
锁

由于您正在

本地存储中存储
日志数据
详细信息

， 只需添加

localstorage

签入

ngoonit

export class AppComponent implements OnInit, OnDestroy { 

    ngOnInit() { 
        if(localStorage.getItem('loggedin')){ 
            if(localStorage.getItem('loggedin') == 'true') 
            { 
                this.loggedIn = true; 
            } 
            else
            { 
                this.loggedIn = false; 
            } 
        }else{
            this.loggedIn = false; 
        }
    }
}

---

为什么你想在这两个页面上登录和注销？登录后将其放在主页上仅显示主页。有什么特别的标准吗？最初，我有登录和注册，所以从用户页面，注册表格也会在那里。一旦我用sign或SignUp登录，然后用户页面的SignUp表单隐藏，当我注销时，我需要所有这些SignIn和SignUp，所以从用户页面，SignUp表单到come，我没有发现任何意义有2个SignIn和SignOut表单在同一个位置我登录，SignIn这个词会被SignOut替换，你有错误吗？请检查您的

loggedIn

变量中的值是多少？非常感谢