Vue中使用js-cookie外掛實現登入時記住密碼後存取到Cookie中

阿新 • • 發佈：2020-09-01

場景

使用vue實現一個登入頁面時，實現記住密碼功能。

在勾選了記住密碼後將密碼儲存到Cookie中，然後下次直接從Cookie中取。

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

官網

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

安裝

npm install js-cookie --save

使用

為了使用方便，將設定和新增以及移除 Cookie的方法抽離出來為公共方法。

首先在專案下新建 utils目錄，在目錄下新建auth.js

然後在此js中先引入js-cookie外掛

import Cookies from 'js-cookie'

然後宣告一個作為存取和刪除cookie的標誌的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() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
  }

你可可以不對cookie進行封裝方法，在第一步安裝完js-cookie後，

直接在需要對Cookie進行操作的vue頁面，這裡是login.vue登入頁面

import Cookies from "js-cookie";

引入後在點選登入按鈕的處理事件方法中

         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');
          }

這塊邏輯是如果點選了記住密碼，則將使用者名稱和密碼和是否記住密碼存入進Cookie

這裡的密碼呼叫了RSA加密的方式防止密碼明文暴露。

具體實現可以參照下面

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

這是在點選登入按鈕後點擊了記住密碼的操作，那麼在一開始進入登入頁面後就需要去獲取Cookie然後

去填充進輸入框

所以在login.vue頁面的created函式中

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

呼叫獲取Cookie的方法，方法的具體實現

    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)
      };
    },