Fórum Academy - Inatividade VUEJS/Laravel

Criador Rafael Lannes 17/02/2020

Boa tarde.

Como consigo tratar a questão da inatividade com vuejs/laravel?

Por exemplo, quando fico com o sistema aberto durante um tempo a conexão com o "laravel" se perde e é necessário dar um F5 ou logar novamente, só que como o vue js já está carregado, a navegabilidade entre os componentes funcionam, mas ao tentar acessar alguma rota da API, as vezes dá erro de pagina expirada.

6 comentários

Criador Rafael Lannes 17/02/2020

Andei pesquisando antes de abrir o ticket e vi que poderia ser algo relacionado ao token, mas utilizo o adminlte e faço a chamada

<meta name="csrf-token" content="{{ csrf_token() }}">

no arquivo master, onde o <router-view> fica setado e para as requisições, utilizo o axios da forma padrão do laravel

Manager Carlos Ferreira 17/02/2020

Olá, Rafael!
Tudo bem?

Quando tenta acessar um recurso na API (Laravel) e estiver inativo (login expirou) ele devolve um stauts 401 (Unauthenticated)

Nesse caso, você pode por exemplo validar o token de acesso novamente, e se realmente não estiver mais válido, basta redirecionar para a tela de login.

Para conseguir fazer isso vai precisar criar um serviço (Service), apenas para centralizar as requisições http com o axios, porque assim você pode centralizar essa responsabilidade de validar a requisição.

Pegou a ideia amigo?

Criador Rafael Lannes 17/02/2020

Mais ou menos... Atualmente eu faço as requisções dentro dos componentes...

teria algum exemplo de como implementar?

Manager Carlos Ferreira 17/02/2020

Olá, amigo!

Sim, mesmo sendo um component dentro do blade a requisição é feita via ajax (usando o axios provavelmente), certo?
Ao requisitar e estiver deslogado já (inativo) o retorno é 401, nesse caso você pode segui o mesmo processo (e talvez se atender a sua aplicação fazer um refresh da página com JS, porque assim redireciona para a rota de login)

Criador Rafael Lannes 17/02/2020

Entendi. na verdade, as paginas interenas não são dentro do blade. Eu uso o router link e direciono com o vueRouter mesmo..... aí dentro dos componentes, tenho os métodos.... só a página de autenticação que feita pelo laravel.

Como eu conseguiria fazer essa tratativa, até pq em alguns componentes tem mais de uma chamada

  loadArts() {
      axios.get("api/countArt").then(response => {
        this.arts = response.data;
      });
    },
    loadUsers() {
      axios.get("api/countUser").then(response => {
        this.users = response.data;
      });
    },

Manager Carlos Ferreira 17/02/2020

Você pode definir manualmente na chamada com o método catch, exemplo:
.catch(error => {
    console.log(error)

    if (error.response && error.response.status === 401) {
        // faz refresh na página
        document.location.reload(true)
    }
})