Solucionado (ver solução)
Solucionado
(ver solução)
12
respostas

Vue router

Opa, boa tarde! Eu criei uma api rest, e nela quando efetuo o login ela me retorna um token... até ai tudo bem... Mas como faço para pegar esse TOKEN e armazenar ele num header? Pois seria de autenticação.

12 respostas

Armazenar em um header? pode ser mais especifico?

Quando enviamos o token para a api o correto é enviar por um header authentication...

Certo, agora eu entendi, para enviar por header é simples, se você estiver usando o axios faça da seguinte maneira.

Ele vai receber três parametros

axios.post(rota, parametros, config)

Então basicamente ficaria mais ou menos assim...

    axios.post('http://www.google.com/', {
        id: 1
    }, {
        headers: {
            // Aqui você passa seu token
            Authorization: 'Bearer ....'

            // Caso tenha usado normal
            Token: 'SEU TOKEN'
        }
    })

Bacana mestre, mas na verdade uso o resource... mas vou passar o axios, pois vi aqui e achei mais interessante...

Mas assim, quando efetuo o login, ele gera o token, como só faço o login 1 só vez, como ele pega esse token para todas as requisições?

solução!

Com Vue-Resource você pode fazer assim (Segue a mesma linha )

    this.$http.post('rota',  () =>  {}, {
        headers:  {
            Authorization:  '3213312dsa'
        }
    })

Mas eu aconselho utilizar o Axios.

O interessante é você armazenar esse token em algum lugar para utilizar em requisições futuras.

Ex:

    sessionStorage.setItem('token',  'TOKEN AQUI')

Dessa maneira ele ficará armazenado, ai para passar ele em futuras requisições é simples

    axios.post('/CadastrarUsuario', {
        name:  'Rafael Augusto'
    }, {
        headers: {
            Token: sessionStorage.token
        }
    })

Cara, me salvou rsrs... Muito obrigado pela força, vou sim utilizar o axios e tb utilizar essa forma ai que falou, bem útil, e direto ao ponto, irmão, muito obrigado mesmo pela força! Correndo pra estudar a documentation do axios, valeu brother!

De nada cara, precisando estamos ai, se puder marca como resolvido.

Pronto irmão, coloquei como solucionada, muito obrigado mesmo.

Me tira uma dúvida... Eu consigo fazer upload de imagem do vue para uma api só por base64 ou consigo tb normal salvando a imagem lá em uma pasta?

É possivel sim, não muda muito do tradicional, pois será feito com Javascript e não especificamente com VueJS, tambem da para usar alguma library pronta para facilitar, um exemplo é a vue-picture-input

<picture-input 
      ref="pictureInput" 
      @change="onChange" 
      width="600" 
      height="600" 
      margin="16" 
      accept="image/jpeg,image/png" 
      size="10" 
      buttonClass="btn"
      :customStrings="{
        upload: '<h1>Bummer!</h1>',
        drag: 'Drag a  GIF or GTFO'
      }">
</picture-input>

Show! Obrigado pela força mano, tem me ajudado bastante... Valeu mestre!

Rafael, você conseguiria e ajudar com esse tópico? https://cursos.alura.com.br/forum/topico-apagar-do-lado-do-cliente-usando-axios-59396

RESOLVIDO!

Me tira uma dúvida Rafael, não sei se entende bem disso... Mas vamos lá!

Esse package de upload ai que me mandou ele gera um base64, porém esse código seria a imagem própriamente dito? Eu sei que no backend preciso fazer algum tratamento, porém quando uso base 64 eu não preciso da imagem "física" em alguma pasta?