場景

使用vue實(shí)現(xiàn)一個(gè)登錄頁面時(shí)，實(shí)現(xiàn)記住密碼功能。

在勾選了記住密碼后將密碼存儲(chǔ)到Cookie中，然后下次直接從Cookie中取。

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

官網(wǎng)

https://www.npmjs.com/package/js-cookie

安裝

npm install js-cookie --save

使用

為了使用方便，將設(shè)置和添加以及移除 Cookie的方法抽離出來為公共方法。

首先在項(xiàng)目下新建 utils目錄，在目錄下新建auth.js

然后在此js中先引入js-cookie插件

import Cookies from 'js-cookie'

然后聲明一個(gè)作為存取和刪除cookie的標(biāo)志的key常量

const TokenKey = 'Admin-Token'

然后封裝并暴露方法

export function getToken() {return Cookies.get(TokenKey) }export function setToken(token) {return Cookies.set(TokenKey, token) }export function removeToken() {return Cookies.remove(TokenKey) }

所以auth.js的完整代碼

import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() {return Cookies.get(TokenKey) }export function setToken(token) {return Cookies.set(TokenKey, token) }export function removeToken() {return Cookies.remove(TokenKey) }

然后在需要用到的vue頁面中對需要的方法引入，這里以獲取token為例

import { getToken } from '@/utils/auth'

然后就可以使用getToken獲取token了

? if (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個(gè)請求攜帶自定義token 請根據(jù)實(shí)際情況自行修改}

你可可以不對cookie進(jìn)行封裝方法，在第一步安裝完js-cookie后，

直接在需要對Cookie進(jìn)行操作的vue頁面，這里是login.vue登錄頁面

import Cookies from "js-cookie";

引入后在點(diǎn)擊登錄按鈕的處理事件方法中

???????? if (this.loginForm.rememberMe) {Cookies.set("username", this.loginForm.username, { expires: 30 });Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });} else {Cookies.remove("username");Cookies.remove("password");Cookies.remove('rememberMe');}

這塊邏輯是如果點(diǎn)擊了記住密碼，則將用戶名和密碼和是否記住密碼存入進(jìn)Cookie

這里的密碼調(diào)用了RSA加密的方式防止密碼明文暴露。

具體實(shí)現(xiàn)可以參照下面

https://mp.csdn.net/console/editor/html/108343805

這是在點(diǎn)擊登錄按鈕后點(diǎn)擊了記住密碼的操作，那么在一開始進(jìn)入登錄頁面后就需要去獲取Cookie然后

去填充進(jìn)輸入框

所以在login.vue頁面的created函數(shù)中

? created() {this.getCookie();},

調(diào)用獲取Cookie的方法，方法的具體實(shí)現(xiàn)

??? getCookie() {const username = Cookies.get("username");const password = Cookies.get("password");const rememberMe = Cookies.get('rememberMe')this.loginForm = {username: username === undefined ? this.loginForm.username : username,password: password === undefined ? this.loginForm.password : decrypt(password),rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)};},

首先是聲明相應(yīng)的常量來根據(jù)key獲取Cookie中的數(shù)據(jù)，然后去進(jìn)行是否為undefined的判斷。

如果是undefined的話說明就是之前沒有執(zhí)行記住密碼的操作，即Cookie中沒有存儲(chǔ)的用戶名密碼等。

那么此登錄表單綁定的輸入框的屬性就是本身，否則的話就是從Cookie中去取用戶名和密碼。

總結(jié)

以上是生活随笔為你收集整理的Vue中使用js-cookie插件实现登录时记住密码后存取到Cookie中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。