时间戳

首页 > 解决方案 > 为什么我的 axios 获取请求不起作用（登录）

html - 为什么我的 axios 获取请求不起作用（登录）

问题描述

我目前正在为一个学校项目创建一个登录页面。我正在使用 vue.js 并尝试使用 axios 来运行我的 get-request。我的问题是，我什至没有进入 .then() --> alert(TEST1) 是最后一件事。我没有收到任何错误有谁知道我为什么会遇到这个问题以及如何解决它？谢谢！

代码：

<template>
    ....
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6" id="formsCSS">
                <form id="login" method="get">
                    <div class="form-group">
                        <input type="text" name="username" id="username" class="form-control" placeholder="Username" required maxlength="50">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" class="form-control" id="password" placeholder="Password" required>
                    </div>
                    <button @click="login" type="submit" name="login_button" class="block">Login</button>
                </form>
   ....
    </div>
</template>
<script>
    //import axios from './node_modules/axios/index.js';
    import axios from 'axios';
    export default {
        methods: {
            login() {
                var usrn = document.getElementById("username").value;
                var passwd = document.getElementById("password").value;
                var usesGranted = 50;
                alert("TEST0");

                this.doGetRequest(usrn, passwd, usesGranted, false);
            },
            doGetRequest(passwd, usrn, usesGranted, logedIn) {
                alert("TEST1");
                axios.get('https://moray.xyz/trawaapi/token/obtainToken.php', {
                    data: {
                        auth: {
                            username: usrn,
                            password: passwd
                        },
                        uses: usesGranted
                    }
                })
                    .then((response) => {
                        //Informationen die für Requests benötigt werden in der sessionStorage abspeichern
                        alert("TEST2");
                        console.log(response);
                        sessionStorage.setItem("token", response);
                        sessionStorage.setItem("password", passwd);
                        sessionStorage.setItem("username", usrn);
                        sessionStorage.setItem("uses", usesGranted)
                    })
                    .catch((error) => {
                        //Neuen Token anfordern
                        if (error == 401) {
                            if (logedIn == true)
                                alert("....");
                        }
                        console.error(error);
                    });
            }

        }
    };
</script>

标签： htmlvue.jsaxios

解决方案

您必须阻止发送表单。更改 remove onclick from button 并将另一个事件添加到 form 标签：

<form @submit.prevent="yourFunction" id="login">

由于我们阻止电子邮件发送和运行yourFunction- 我们不需要使用method属性。

推荐阅读