vue實現加記住密碼功能

2022-09-09 10:00:19 字數 4015 閱讀 5771

1.記住密碼勾選,點登陸時,將賬號和密碼儲存到cookie,下次登陸自動顯示到表單內

2.不勾選,點登陸時候則清空之前儲存到cookie的值,下次登陸需要手動輸入

大體思路就是通過存/取/刪cookie實現的;每次進入登入頁,先去讀取cookie,如果瀏覽器的cookie中有賬號資訊,就自動填充到登入框中,存cookie是在登入成功之後,判斷當前使用者是否勾選了記住密碼,如果勾選了,則把賬號資訊存到cookie當中,效果圖如上:

<

div

class

="ms-login"

>

<

el-form

:model

="ruleform"

:rules

="rules"

ref="ruleform"

label-width

="0px"

class

="demo-ruleform"

>

<

el-form-item

prop

="username"

>

<

el-input

v-model

="ruleform.username"

placeholder

="使用者名稱"

>

el-input

>

el-form-item

>

<

el-form-item

prop

="password"

>

<

el-input

type

="password"

placeholder

="密碼"

v-model

="ruleform.password"

@keyup.enter.native

="submitform('ruleform')"

>

el-input

>

el-form-item

>

<

el-checkbox

v-model

="checked"

>記住密碼

el-checkbox

>

<

br>

<

br>

<

div

class

="login-btn"

>

<

el-button

type

="primary"

@click

="submitform('ruleform')"

>登入

el-button

>

div>

el-form

>

div>

//

頁面載入呼叫獲取cookie值

mounted() ,

methods:

else

//與後端請求**,本功能不需要與後台互動所以省略

console.log("登陸成功");

});},

//設定cookie

setcookie(c_name, c_pwd, exdays) ,

//讀取cookie

getcookie: function

() else

if (arr2[0] == 'userpwd') }}

},//清除cookie

clearcookie: function

()

瀏覽器中的cookie資訊如下圖,注意這裡的cookie的expire/max-age過期時間,這個時間是格林尼治標準時間gmt,世界統一的時間,gmt+8小時就是北京時間。(這裡不做加密功能)

1.記住密碼勾選,點登陸時,將賬號和密碼儲存到cookie,下次登陸自動顯示到表單內

2.不勾選,點登陸時候則清空之前儲存到cookie的值,下次登陸需要手動輸入

大體思路就是通過存/取/刪cookie實現的;每次進入登入頁,先去讀取cookie,如果瀏覽器的cookie中有賬號資訊,就自動填充到登入框中,存cookie是在登入成功之後,判斷當前使用者是否勾選了記住密碼,如果勾選了,則把賬號資訊存到cookie當中,效果圖如上:

<

div

class

="ms-login"

>

<

el-form

:model

="ruleform"

:rules

="rules"

ref="ruleform"

label-width

="0px"

class

="demo-ruleform"

>

<

el-form-item

prop

="username"

>

<

el-input

v-model

="ruleform.username"

placeholder

="使用者名稱"

>

el-input

>

el-form-item

>

<

el-form-item

prop

="password"

>

<

el-input

type

="password"

placeholder

="密碼"

v-model

="ruleform.password"

@keyup.enter.native

="submitform('ruleform')"

>

el-input

>

el-form-item

>

<

el-checkbox

v-model

="checked"

>記住密碼

el-checkbox

>

<

br>

<

br>

<

div

class

="login-btn"

>

<

el-button

type

="primary"

@click

="submitform('ruleform')"

>登入

el-button

>

div>

el-form

>

div>

//

頁面載入呼叫獲取cookie值

mounted() ,

methods:

else

//與後端請求**,本功能不需要與後台互動所以省略

console.log("登陸成功");

});},

//設定cookie

setcookie(c_name, c_pwd, exdays) ,

//讀取cookie

getcookie: function

() else

if (arr2[0] == 'userpwd') }}

},//清除cookie

clearcookie: function

()

瀏覽器中的cookie資訊如下圖,注意這裡的cookie的expire/max-age過期時間,這個時間是格林尼治標準時間gmt,世界統一的時間,gmt+8小時就是北京時間。(這裡不做加密功能)

記住密碼功能實現

可以用兩種方式實現該功能 1 cookie方式 2 localstorage方式 click me ps 我用cookie時未成功。var user document.getelementbyid user var password document.getelementbyid password ...

vue專案實現記住密碼到cookie功能 附原始碼

1.記住密碼勾選,點登陸時,將賬號和密碼儲存到cookie,下次登陸自動顯示到表單內 2.不勾選,點登陸時候則清空之前儲存到cookie的值,下次登陸需要手動輸入 大體思路就是通過存 取 刪cookie實現的 每次進入登入頁,先去讀取cookie,如果瀏覽器的cookie中有賬號資訊,就自動填充到登...

vue專案實現記住密碼到cookie功能

1.記住密碼勾選,點登陸時,將賬號和密碼儲存到cookie,下次登陸自動顯示到表單內 2.不勾選,點登陸時候則清空之前儲存到cookie的值,下次登陸需要手動輸入 大體思路就是通過存 取 刪cookie實現的 每次進入登入頁,先去讀取cookie,如果瀏覽器的cookie中有賬號資訊,就自動填充到登...