Question

我有一个canActivate方法。当我在我的网站上唱歌时，我设置了一个类型为boolean true的变量。我的canActivate使用这个变量。但是如果我刷新页面，则值返回false。如果页面刷新

，我需要保留值

代码

export class AuthService{
   loggedin = false;

   isAuthenticated(){
     return this.loggedin;
   }

   login(){
     this.loggedin = true;
   }

   logout(){
     this.loggedin = false;
   }
}

和canActivate

@Injectable()
export class AuthGuard implements CanActivate{

   constructor(private authService: AuthService, private router: Router){}

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean{
     if(this.authService.isAuthenticated()){
       return true;
     }else{
       this.router.navigate(['/']);
     }
   }
}

当我进行登录时，我调用函数login并将值设置为true。但是，如果我重新加载页面，则值重置为false。我需要在价值中做出真实的。值的一种更改方法是调用方法注销。为什么我能这样做？

Answer 1

Use localStorage, here are your refactored methods, should work as is:

   isAuthenticated(){
     return localStorage.getItem('loggedin', true);
   }

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

   logout(){
     localStorage.removeItem('loggedin'); // here you can either remove the item or use setItem and simply assign a false value localStorage.setItem('loggedin', false);
   }

Now when you refresh, your app will check isAuthenticated() which will in turn check the storage for the value.

Answer 2

如果你使用localStorage.setItem()，会有一个bug，即使你重新启动浏览器变量仍然存在，可能是用户登录信息，这是不可接受的。使用 window.sessionStorage["xxx"] 是一种更好的方式，这使得变量只在一个会话中有效，如果浏览器重新启动，变量就会失效，这更可能是常见的场景。

刷新页面时如何保持变量的值

2 个答案: