Configuração Inicial do Backend
Para estabelecer comunicação assíncrona entre um frontend interativo e um servidor, é necessário preparar a infraestrutura. Crie um projeto Django e um aplicativo dedicado, por exemplo, accounts. Em seguida, defina a rota inicial para exibir a interface de autenticação.
# urls.py
from django.urls import path
from accounts.views import render_auth_page
urlpatterns = [
path('auth/', render_auth_page, name='auth_page'),
]
# views.py
from django.shortcuts import render
def render_auth_page(request):
return render(request, 'accounts/login_interface.html')
Preparação da Interface com Vue.js
No arquivo de template, inicialize a instância do Vue. Como tanto o motor de templates do Django quanto o Vue utilizam chaves duplas {{ }} para interpolação de variáveis, é fundamental redeifnir os delimitadores do Vue. Isso evita conflitos de renderização no lado do servidor.
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Painel de Acesso</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="auth-container">
<p>Status: [[ feedbackMessage ]]</p>
<button @click="triggerAuth('GET')">Acessar via GET</button>
<button @click="triggerAuth('POST')">Acessar via POST</button>
</div>
<script>
const authApp = new Vue({
el: '#auth-container',
delimiters: ['[[', ']]'],
data: {
feedbackMessage: 'Aguardando ação do usuário...'
},
methods: {
triggerAuth(methodType) {
console.log(`Método selecionado: ${methodType}`);
}
}
});
</script>
</body>
</html>
Implementação do Axios para Comunicação HTTP
Adicione a biblioteca Axios ao documento. Em vez de criar métodos isolados para cada verbo HTTP, a lógica foi unificada utilizando async/await e uma configuração dinâmica do objeto de requisição. Essa abordagem moderna preserva o contexto this da instância Vue e simplifica o tratamento de erros.
<!-- Adicione no <head> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Substitua o bloco <script> anterior por: -->
<script>
const authApp = new Vue({
el: '#auth-container',
delimiters: ['[[', ']]'],
data: {
feedbackMessage: 'Aguardando ação do usuário...',
apiEndpoint: 'http://127.0.0.1:8000/api/verify/'
},
methods: {
async triggerAuth(httpMethod) {
const credentials = { user: 'dev_admin', pass: 's3cr3t!' };
let axiosConfig = {
method: httpMethod.toLowerCase(),
url: this.apiEndpoint
};
if (httpMethod === 'GET') {
axiosConfig.params = credentials;
} else {
axiosConfig.data = credentials;
}
try {
const serverResponse = await axios(axiosConfig);
if (serverResponse.data.status === 'authorized') {
this.feedbackMessage = `Bem-vindo, ${serverResponse.data.payload.user}!`;
} else {
this.feedbackMessage = serverResponse.data.error;
}
} catch (networkError) {
this.feedbackMessage = 'Falha na comunicação com o servidor.';
console.error(networkError);
}
}
}
});
</script>
Lógica de Validação no Servidor
O endpoint do Django deve ser capaz de interpretar tanto parâmetros de query string (enviados via GET) quanto o corpo da requisição em formato JSON (enviado via POST). A view abaixo processa essas entradas e retorna uma resposta estruturada.
# urls.py (atualizado)
from django.urls import path
from accounts.views import render_auth_page, verify_credentials
urlpatterns = [
path('auth/', render_auth_page, name='auth_page'),
path('api/verify/', verify_credentials, name='verify_api'),
]
# views.py (atualizado)
import json
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def verify_credentials(request):
if request.method == 'GET':
user = request.GET.get('user')
pwd = request.GET.get('pass')
elif request.method == 'POST':
try:
body_data = json.loads(request.body.decode('utf-8'))
user = body_data.get('user')
pwd = body_data.get('pass')
except json.JSONDecodeError:
return JsonResponse({'status': 'error', 'error': 'Payload inválido'}, status=400)
else:
return JsonResponse({'status': 'error', 'error': 'Método não permitido'}, status=405)
if user == 'dev_admin' and pwd == 's3cr3t!':
return JsonResponse({
'status': 'authorized',
'payload': {'user': user, 'session_id': 'abc-123-xyz'}
})
return JsonResponse({'status': 'denied', 'error': 'Credenciais inválidas'}, status=401)