Question

在模板组件AppComponent中，根据值，变量this.loggedInService.isLoggedIn在logIn()和logout()方法之间切换，这在应用程序组件{{1}中}在服务AppComponent中订阅了这些方法，并根据方法将变量的值更改为true或false。

同样在Guard的方法LoggedinService中，我根据变量checkLogin (url: string)的值返回true或false

一切正常，但是当我重置页面时，我需要保留输入或输出按钮的值。我尝试在服务的this.loggedInService.isLoggedIn和login()方法中执行此操作，但是在重新加载页面后，更改仍未保存。帮助解决此问题，以便在页面重新启动后保留更改。

AppComponent模板：

logout()

AppComponent代码：

          <li class="nav-item">
                <a class="btn btn-outline-success"
                   [class.btn-outline-success]="!this.loggedInService.isLoggedIn"
                   [class.btn-outline-danger]="this.loggedInService.isLoggedIn"
                   (click)="this.loggedInService.isLoggedIn ? logout() : logIn()">
                    {{this.loggedInService.isLoggedIn ? 'Exit' : 'Enter'}}
                </a>
            </li>

LoggedinService：

export class AppComponent implements OnInit {

constructor(private loggedInService: LoggedinService,
            private router: Router) {
}

ngOnInit() {}

logIn(): void {
    this.loggedInService.login();
    if (this.loggedInService.isLoggedIn) {
        let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl :
            '/gallery';
        this.router.navigate([redirect]);
    }
}

logout(): void {
    this.loggedInService.logout();
    this.router.navigate(['/']);
}
}

AuthGuard：

export class LoggedinService implements OnInit {
    isLoggedIn: boolean = false;
    redirectUrl: string;

    constructor() {

    }

    ngOnInit() {
        this.CheckAuthentication();

    }
    enter code here
    CheckAuthentication(): boolean {
        if (localStorage.getItem('login') === 'true') {
            return this.isLoggedIn = true;
        } else if (localStorage.getItem('login') === 'false') {
            return this.isLoggedIn = false;
        }
    }

    login() {
        localStorage.setItem('login', 'true')
    }

    logout() {
        localStorage.removeItem('login');
        localStorage.setItem('login', 'false')
    }

Answer 1

将isLoggedIn更改为基于localStorage项的get方法

export class LoggedinService implements OnInit {

    redirectUrl: string;

    constructor() {}

    get isLoggedIn(): boolean {
       return localStorage.getItem('login') ? true : false;
    }

    login(){
     localStorage.setItem('login','true') 
    }

    logout(){
     localStorage.removeItem('login') 
    }

}

app.component

export class AppComponent {
  constructor(private loggedInService: LoggedinService,
    private router: Router) {
  }

  logIn(): void {
      this.loggedInService.login(); // set the state as login
      let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl :
        '/gallery';
      this.router.navigate([redirect]);
  }

  logout(): void {
    this.loggedInService.logout(); //// set the state as logout
    this.router.navigate(['/']);
  }
}

stackblitz demo

Answer 2

我对您的代码有疑问。

在LoggedInService onInit中，为什么直接调用login()和logout()？

this.CheckAuthentication();
this.login();
this.logout();

这样做是在您的 localStorage 中添加和删除。另外，您可以通过在浏览器控制台中输入localStorage来检查本地存储中的数据。我认为您应该注释或删除onInit方法

为什么本地存储的条件不起作用？

2 个答案: