angular - 如何在 Angular 7 中使用 sessionStorage 而不是 localStorage？

Question

我是 angular 和 asp.net web api 的新手。我正在使用 asp.net web api 和 angular 7 创建网站，我完成了注册和登录工作，但现在我需要在 angular 代码中使用 sessionStorage 而不是 localStorage。我正在共享我使用 localStorage 的所有文件，并且 localStorage 代码运行良好，但现在我需要使用 sessionStorage。它显示了当前登录的用户的所有信息。请帮助我。谢谢。我分享了我为本地存储所做的所有代码，我知道这很混乱，但希望你能解决我的问题。我从代码和 html 代码中删除了导入语句，这些语句用于显示登录用户信息，如用户名电子邮件和全名。

这是拦截器类

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private router: Router) {

    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (localStorage.getItem('token') != null) {
            const clonedReq = req.clone({
                headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'))
            });
            return next.handle(clonedReq).pipe(
                tap(
                    succ => { },
                    err => {
                        if (err.status == 401){
                            localStorage.removeItem('token');
                            this.router.navigateByUrl('/user/login');
                        }
                    }))}
        else
            return next.handle(req.clone());
    }}


  //login compnent ts file 
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styles: []
    })
    export class LoginComponent implements OnInit {

      formModel ={
        UserName :'',
        Password:''
      }
      constructor(private service: UserService, private router: Router, private toastr: ToastrService) { }

      ngOnInit() {
    if (localStorage.getItem('token') != null)
      this.router.navigateByUrl('/home');
  }
  onSubmit(form: NgForm) {
    this.service.login(form.value).subscribe(
      (res: any) => {
        localStorage.setItem('token', res.token);
        this.router.navigateByUrl('/home');
      },
      err => {
        if (err.status == 400)
          this.toastr.error('Incorrect username or password.', 'Authentication failed.');
        else
          console.log(err);
      }
    );
  }

}

//auth.grud.ts 文件

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {

  }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    if (localStorage.getItem('token') != null)
      return true;
    else {
      this.router.navigate(['/user/login']);
      return false;
    }

  }
}

//home 组件.ts 文件

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styles: []
})
export class HomeComponent implements OnInit {
  userDetails;

  constructor(private router: Router, private service: UserService) { }

  ngOnInit() {
    this.service.getUserProfile().subscribe(
      res => {
        this.userDetails = res;
      },
      err => {
        console.log(err);
      },
    );
  }

  onLogout() {
    localStorage.removeItem('token');
    this.router.navigate(['/user/login']);
  }
}

请告诉我如何完成这项任务。

标签： angularangular7