message: "Token inválido" ao tentar acessar rota /gerentes após login

Olá, Gabriel!

Consegue dar uma olhada no arquivo usuarios.json da api fake?

Quando essa api retorna 401 no endpoint de login, normamente é quando ela não encontra a combinação de usuário e senha que foi informado.

Agora se o 401 for na rota de gerentes, é algo relacionado ao token.

Pode compartilhar conosco o código onde você monta os cabeçalhos da requisição?

Oi, verifiquei o arquivo usuarios.json e o usuário que cadastrei está lá sim. Inclusive quando tento logar com um usuário que não existe o endpoint do login retorna o erro correto de email ou senha inválidos, então está funcionando. O 401 é na rota de gerentes mesmo, onde, como comentei, retorna o erro de "Token inválido", mesmo com o token correto sendo enviado. Este é o código da requisição:

this.$http.post('auth/login', this.usuario)
            .then(res => {
                console.log(res.data)
                //localStorage.setItem('token', res.data.access_token)
                this.$store.commit('DEFINIR_USUARIO_LOGADO', {
                    token: res.data.access_token,
                    usuario: res.data.usuario
                })
                this.$router.push({name: 'gerentes'})
                })
            .catch(err => console.log(err))

E esse é o arquivo do axios:

import axios from 'axios'

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

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

export default http

Gabriel, esse trecho de código está comentado, veja:

console.log(res.data)
//localStorage.setItem('token', res.data.access_token)

Nesse caso, não está salvando la localStorage.

Já no interceptor:

const token = localStorage.getItem('token')
    if(token){
        config.headers.Authorization = `Bearer ${token}`
    }

Você está tentando obter o token da própria localStorage.

Pode tentar descomentar essa linha:

localStorage.setItem('token', res.data.access_token)

e tentar novamente?

Oi, Marcos. Essa linha comentada foi a primeira forma de implementação apresentada no curso. Comentei-a porque já não estamos mais usando ela para autenticação do usuário. Agora, o instrutor apresentou o uso de Vuex, e sua configuração está no arquivo provedor.js:

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)
const estado = {
    token: null,
    usuario: {}
}

const mutations = {
    DEFINIR_USUARIO_LOGADO(state, {token, usuario}){
        state.token = token
        state.usuario = usuario
    }
}

export default new Vuex.Store({
    state: estado,
    mutations
})

Além disso, ele foi importado e utilizado como store no arquivo main.js da aplicação:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import provedor from './provedor'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import http from '@/http'

Vue.config.productionTip = false

Vue.prototype.$http = http

new Vue({
  router,
  store: provedor,
  render: h => h(App)
}).$mount('#app')

Por isso, em vez de setar o token diretamente no localStorage, comentei a linha que faz isso e fiz a inserção através do provedor configurado em provedor.js:

this.$store.commit('DEFINIR_USUARIO_LOGADO', {
                    token: res.data.access_token,
                    usuario: res.data.usuario
})

Mas tinha entendido que ainda com Vuex o token seria armazenado no localStorage. Como faço para buscar o token gerenciado pelo Vuex se não no localStorage?

Gabriel,

Quando extraímos o nosso token para o vuex, precisamos pegar o token do provedor, veja:

import axios from 'axios'
import provedor from '@/provedor'

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

http.interceptors.request.use(function (config) {
    const token = provedor.state.token
    if (token) {
        config.headers.Authorization = `Bearer ${token}`
    }
    return config
}, function (erro) {
    return Promise.reject(erro)
})

export default http

Entendi. Fiz a alteração conforme mostrou e autenticação pelo Vuex funcionou. Obrigado pela explicação, não vi o instrutor trocando a fonte do token em http.interceptors até então. Agora vi que na aula seguinte à que tive problema com a autenticação o código é corrigido como o senhor mostrou aqui. Obrigado mais uma vez, problema resolvido.