ログインフォームだけの単一のコンポーネントがあります。ログインに失敗すると、何らかの理由でアプリケーションが完全にリロードされます。
これは、アプリケーションのメイン エントリです。それが行うのは、最初の認証 ping だけです。セッションがアップしている場合は、実際のアプリケーションをロードします。それ以外の場合は、単なるログイン フォームである認証コンポーネントをマウントします。
var Application = {
run() {
m.request({
method: "GET",
url: cfg.apiurl("/session/ping"),
extract(xhr) {
return xhr.status > 200 ? xhr.status : xhr.responseText;
}
}).then(r => {
var init = {
uname: r.data.uname
};
router(init);
}, e => {
if (e === 401) {
m.mount(document.body, Authenticate);
}
});
}
};
Application.run();
以下は、認証コンポーネントからビューを除いたものです。ログイン変数をビューにバインドし、送信アクションを定義します。間違った資格情報で送信アクションを実行すると、アプリケーションがリロードされます。
なぜアプリケーションをリロードするのですか?? Chrome コンソールの表示: Navigated to http://localhost:3000/?
「ログイン失敗!!!」の直後 コンソール メッセージ。これにより、アプリケーションが完全にリロードされます。そのため、画面上のエラー メッセージや不正なログインに関するポップアップが表示されなくなります。最後のエラーメッセージをコンソールに出力します「ログイン失敗!!!」。その後、submit 関数が終了すると、URL のルートに移動し、完全なリロードが発生します。
私は何を間違っていますか?
var Authenticate = {
controller, view
};
function controller() {
this.info = m.prop("");
this.data = {
uname: m.prop(""),
passw: m.prop(""),
local: m.prop(false)
};
this.submit = () => {
Login.auth(this.data).then(r => {
if (this.data.uname() === r.data.uname) {
var init = {
uname: r.data.uname
};
router(init);
} else {
console.log("Login Mismatch !!!");
}
}, e => {
if (e === 401) {
console.log("Login Failure !!!");
popa();
} else {
console.log(`Server Errror ${e} !!!`);
}
});
};
}
どうもありがとうございました。