ブラウザのcookieにユーザーが入力した情報を保存しておくことができる。
ログインに必要なメールアドレス、ユーザー名、パスワードなどをブラウザに記憶させておくことができる。
↓完成イメージ
次回から入力を省略することができる。
前提条件として、ログインできる認証システムは構築済みのものとする。
コード
html部分
<v-form ref="test_form">
<v-text-field v-model="postData.email" label="メールアドレス" />
<v-text-field v-model="postData.password" label="パスワード" />
<template>
<v-container class="px-0" fluid>
<v-checkbox v-model="remember" label="ログイン情報を記憶する">
</v-checkbox>
</v-container>
</template>
<v-btn class="info" @click="submit">ログイン</v-btn>
</v-form>上記はvueのCSSフレームワークvuetifyの書き方だが、ほかのフレームワークでもできるのでリンク黄変に書き換えてくれ。
アイコンとかは省略した。
data部分
data: () => ({
postData: {
email: null,
password: null,
},
remember: false,
}),ログイン情報は初めはもちろん空。
チェックボックスもはじめはずしておく。
メソッド部分
getCookieArray() {
let arr = new Array()
if (document.cookie != '') {
let tmp = document.cookie.split('; ')
for (let i = 0; i < tmp.length; i++) {
let data = tmp[i].split('=')
arr[data[0]] = decodeURIComponent(data[1])
}
if(arr['email']&& arr['password']!= ''){
this.remember = true
this.postData.email =arr['email']
this.postData.password = arr['password']
}
}
},
submit() {
if (this.$refs.test_form.validate()) {
axios.post('/api/login', this.postData)
.then(response => {
//ログインに成功したら
this.loggedIn = true;
if (this.remember) {
//ログイン情報を保存する場合
document.cookie = "email=" + this.postData.email
document.cookie = "password=" + this.postData.password
} else {
//保存しない場合
//クッキーを削除
document.cookie = "email=; expires=0"
document.cookie = "password=; expires=0"
}
this.$router.push('/')
})
}
},getCookieArray()メソッドでは、クッキーに以前保存した情報があるなら、それを自動でフォームに入力するだけのメソッド。
クッキーはjsonとかローカルストレージと違って、オブジェクト形式になっていない。
全部の項目を無慈悲にベタ打ちで渡してくる。
submit() メソッドでは、「ユーザー情報を記憶する」にチェックが入っているかどうかで、情報を保存するかを決めている。
ログインに成功した時しかcookieは触らないので、「間違ったログイン情報でも保存されてしまう」なんてことにはならない。
過去に保存した人も、チェックを外せばcookieの情報を削除する書き方にしている。
ログインのメソッド自体は、自分の環境に合わせて書き直してくれ。
apiについては割愛する。
mountedの部分
this.getCookieArray()ページ読み込まれたら、cookieから情報を取得するメソッドを発動させる。
cookieとは？
ブラウザに入力した情報などを記憶しておける領域みたいなやつ。
更新・リロード・再読み込みしても消えない。
