準備するもの
・Django RESTとToken Authができている環境
・Vueのアプリ
アプリ紹介
今回は、フロントエンドがVueでバックエンドがDjangoでできているチケット管理システムのログインのシステムを作成します。
例として、従業員がお客様からの問い合わせに対してチケットを作成していくようなイメージです。
Vueがフロントエンド（クライアント側）でDjangoのAPIのエンドポイントからデータを発信しています。
しかし、このAPIが公共に垂れ流しの状態なのでURI（URL）にアクセスできる人誰でもこのデータにアクセスできてしまいます。
前回はDjango RESTFramewrokを使ってトークンAuthでこのトークンがある人だけデータにアクセスできる人だけAPIのリクエストにデータをリスポンスとして返すことができました。
今日はそれをVueのアプリから行っていきたいと思います。
アプリの準備
DjangoアプリはこちらのURLのGitHubからクローンしてください。
https://github.com/TraitOtaku/djangoAPI/tree/8_AuthReady
Vueのアプリはこちらからダウンロードしてください。
https://github.com/TraitOtaku/VueApp/tree/4_AuthReady
Gitのコマンドを使ったことがない人は面倒でも必須のスキルですので必ず覚えておくようにしましょう。
Gitのコマンドです。
git clone URL cd /to/repo/ git branch -a Git checkout <branch_name>
Djangoの準備の仕方は他の動画でも説明しているので今回は飛ばします。
Vueもnpmかyarnでライブラリをインストールして準備完了です。
npm i
EventService.js
まずは、ログインする際にDjangoにユーザー名とパスワードをJSONファイルで送りつけます。この際POSTリクエストになっていることに注意しましょう。
で、正しいクレデンシャル（ログイン情報）が遅れた後にDjangoからTokenが返されます。
const loginClient = axios.create({
baseURL: "http://127.0.0.1:8000/",
withCredentials: false,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
});
submitLogin(logininfo) {
return loginClient.post("api-token-auth/", logininfo);
},
ちなみにapiClientというファンクションでDjangoのTokenAuthに必要なTokenをリクエストの際に送るヘッダーに付けてあげるようにしています。
const apiClient = axios.create({
baseURL: "http://127.0.0.1:8000/api",
headers: {
Authorization: `Token ${localStorage.getItem('token')}`,
"Content-Type": "application/json",
},
});
では、このJavaScriptをエキスポートして、LoginView.vueのコンポーネントを作成します。
LoginView.vue
このページ（コンポーネント）でログインに関連するシステムを構築しています。
AntDesignのUIライブラリからコピペしたフォームと、そのサブミットボタンにクリックイベントを付けてます。
const submitLogin = () => {
EventService.submitLogin(toRaw(formState))
.then((response) => {
console.log(response.data);
localStorage.setItem('token', response.data.token)
router.push({ name: 'home' })
})
.catch((error) => {
console.log("Error" + error);
});
}
で、ここで、Django から返ってきたトークンをブラウザのストレージにtokenというキーで保管しておきます。
これでログインができたらrouter.pushでホーム画面にジャンプするように設定しています。
本来なら、ログインしない限りhomeのページへのアクセスはできないようにするのがベストですが、今回は割愛しています。
もしするのであればv-ifとvuexでState managementを使うのがベストだと思います。
また、ログインのエラーがあった場合のロジックもここに追加できますね、。
では、ログインができたらHomeViewに行くのでそこにログアウトのボタンも作成しましょう。
HomeViews.vue
ログアウトのロジックは下記のようなコードでできます。
単純にlocalStorageに保管されているtokenアイテムを取り除き、router.pushのコマンドでログイン画面に誘導してあげます。
const logOut = () => {
localStorage.removeItem('token')
router.push({ name: 'login' })
}
まとめ
まあ、全体的に煩雑なコードですが、これでVueアプリからDjangoのToken AuthのAPIにアクセスすることができました。
バックエンドのテクノロジーとAuth（認証）のやり方によって、ヘッダーの書き方が変わることに注意しましょう。
あとはサインアップと、パスワードを忘れた際の再設定のロジックもDjango側と一緒に作成していけばプロダクションで使えそうですね。
お疲れ様です。