Problemas com: config.headers.Authorization | Vue.js: protegendo recursos com autenticação e VueX

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Laise Assis

| 92.1k xp | 6 posts

Programadora Front-End

Não estou conseguindo executar o código acima.

Me é retornado o seguinte erro: Assignment to property of function parameter 'config'.

Não estou sabendo como resolver... Meu código ficou assim:


const http = axios.create({
  baseURL: 'http://localhost:8080',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
});

http.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (erro) => Promise.reject(erro));

3 respostas

por David Mafra Filho

| 233.6k xp | 54 posts

Operador de Transpaleteira

02/04/2022

Boa noite @Laise

O que eu vi aqui e pode ser o erro é que no seu headers o Accept está sem aspas simples, não fazendo ele válido na requisição, veja se esse pode ser o problema, pois não vi nada de mais diferente no seu código junto ao professor.

por Vinicios Neves

| 974.8k xp | 1060 posts

Instrutor Frontend Engineer

04/04/2022

Laise, isso me parece algo do es-lint.

Essa regra aqui.

Experimenta alterar o seu .eslintrc.js (que fica no diretório raiz do projeto) e desabilite essa regra, dessa forma:

"no-param-reassign": 0

O arquivo, na íntegra fica assim:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-param-reassign': 0
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

solução!

por Laise Assis

| 92.1k xp | 6 posts

Programadora Front-End

04/04/2022

Oi Pessoal!

O problema não era nenhum deste 2 :( vou explicar porque:

David - Minha aplicação aceita o Accept sem aspas, em função das configurações do Eslint. Marcos - Colocar esse code lá no eslint, fez com que o erro parasse de ser apontado, mas não de ser reconhecido :(

O que resolveu o problema pessoal, foram 2 codigos:

Coloquei antes da minha problema, esse código aqui (que verifica antes de existe headers na nossa aplicação, senão, ele já cria um objeto):

if (!config.headers) config.headers = {};

<3 muito obrigada pela ajuda pessoal :D