ERROR ReferenceError: localStorage is not defined

ERROR ReferenceError: localStorage is not defined at _TokenService.retornaToken (/Users/leonardocarreradasilva/Git/eventosV2AG/src/app/services/token/token.service.ts:19:5) at _TokenService.possuiToken (/Users/leonardocarreradasilva/Git/eventosV2AG/src/app/services/token/token.service.ts:23:19) at _UserService (/Users/leonardocarreradasilva/Git/eventosV2AG/src/app/services/user/user.service.ts:15:23) at Object.UserService_Factory (/Users/leonardocarreradasilva/Git/eventosV2AG/src/app/services/user/user.service.ts:42:3) at eval (/Users/leonardocarreradasilva/Git/eventosV2AG/node_modules/@angular/core/fesm2022/core.mjs:5239:43) at runInInjectorProfilerContext (/Users/leonardocarreradasilva/Git/eventosV2AG/node_modules/@angular/core/fesm2022/core.mjs:3644:9) at R3Injector.hydrate (/Users/leonardocarreradasilva/Git/eventosV2AG/node_modules/@angular/core/fesm2022/core.mjs:5238:17) at R3Injector.get (/Users/leonardocarreradasilva/Git/eventosV2AG/node_modules/@angular/core/fesm2022/core.mjs:5106:33) at injectInjectorOnly (/Users/leonardocarreradasilva/Git/eventosV2AG/node_modules/@angular/core/fesm2022/core.mjs:3831:40) at Module.ɵɵinject (/Users/leonardocarreradasilva/Git/eventosV2AG/node_modules/@angular/core/fesm2022/core.mjs:3837:42)

import { Inject, Injectable } from '@angular/core'; const KEY = 'token'; @Injectable({ providedIn: 'root', }) export class TokenService { salvarToken(token: string) { localStorage.setItem(KEY, token); } excluiToken() { localStorage.removeItem(KEY); } retornaToken() { return localStorage.getItem(KEY) ?? ''; } possuiToken() { return !!this.retornaToken(); } }

Olá, Leonardo!

Nesse caso, se você está vendo o erro "ReferenceError: localStorage is not defined", provavelmente é porque está tentando acessar o objeto localStorage, que é específico do navegador, em um ambiente onde ele não está disponível, como durante a renderização no lado do servidor ou em um ambiente que não suporta o localStorage.

Uma opção é se certificar de que está chamando o localstorage quando estiver apenas no lado do navegador, de maneira semelhante a essa:

import { Injectable } from '@angular/core';
import { TokenService } from './token.service';
import jwt_decode from 'jwt-decode';
import { BehaviorSubject } from 'rxjs';
import { PessoaUsuaria } from '../types/type';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private userSubject = new BehaviorSubject<PessoaUsuaria | null>(null);

  constructor(private tokenService: TokenService) {
    if(this.tokenService.possuiToken()) {
      this.decodificarJWT();
    }
  }

  private decodificarJWT() {
    const token = this.tokenService.retornarToken();
    const user = jwt_decode(token) as PessoaUsuaria;
    this.userSubject.next(user);
  }

  retornarUser() {
    return this.userSubject.asObservable();
  }

  salvarToken(token: string) {
    this.tokenService.salvarToken(token);
    this.decodificarJWT();
  }

  logout() {
    this.tokenService.excluirToken();
    this.userSubject.next(null);
  }

  estaLogado() {
    return this.tokenService.possuiToken();
  }
}

Caso queira queira conferir o código da aula e fazer simulações, basta clicar neste link de download, descompactar a pasta, executar npm i e em seguida npm start.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!