はじめに

Basic認証で強制的にログアウトさせ、別アカウントで再認証させる仕組みを作るのにすごく手間取ったのでメモを残しておきます。

結論

Ajaxで存在しないアカウントを指定し呼んで、その後location.hrefで遷移させればOK。

ソースコード

jQueryの使用を想定。
axios等を使う場合は、脳内で置き換えてください。

function logout() {
  $.get('https://logout@example.com').always(function() {  // https://example.com下がBasic認証必要と想定
    location.href = 'https://example.com';
  });
}

のような関数を作って、aタグのclickイベントとして呼び出せばOK

解説

まず前提として、Basic認証で認証情報の破棄は想定した作りになっていません。
そのため、ログアウト扱いにして再度認証のプロンプトを強制表示させるためには、ユーザーにブラウザを閉じて開き直してもらう以外には、前述のように別ユーザーとしてログインを試行すればOKです。

URLに
https://user_name:password@example.com
と入れることで、https://example.comに、IDuser_name、パスワードpasswordで認証した際と同じ挙動になります。

ここではlogoutという存在しないアカウントで試行をしたことにより、401レスポンスが返ってきて認証が破棄されます。
その後のlocation.hrefでページ遷移をすると認証情報が破棄されているので、再度プロンプトが表示されるというわけです。

Ajaxでsuccessやdoneではなくalwaysを指定しているのは、レスポンスコードが401のためsuccessを通らずfailedになるため、手抜きでalwaysを指定しています。

失敗談

当初はバックエンドのredirect処理で頑張っていましたがうまく転送されず断念。
フロントエンドだけで実装してみました。