Entrar Ainda não tem acesso?
1
resposta

ERROR ReferenceError: localStorage is not defined

Referente ao curso Angular: trabalhando com Tokens JWT na autenticação e cadastro

por Leonardo Carrera da Silva
| 173.6k xp | 4 posts
Desenvolvedor Java Jr

Bom dia, toda ves que preciso usar o localStorage o Angular me apresenta a a seguinte mensagem:

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)

meu Token.service.ts

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();
  }
}

Alguem ja passou por isso ?

1 resposta
por Victor Costa Santos
| 1937.4k xp | 3735 posts
Alura Scuba Team Monitor de ForumOps

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!