How to Implement Remember-Password in Vue Using js-cookie

Scenario

When building a login page with Vue, the goal is to implement a “remember password” feature that stores credentials in a cookie after the user checks the option.

Implementation

Package

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

Installation

npm install js-cookie --save

Utility

Create a utils/auth.js file and import the plugin: import Cookies from 'js-cookie' Define a constant key for the token: const TokenKey = 'Admin-Token' Export helper functions:

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

Using in a Vue component

Import the getter where needed, e.g., in a component that needs the token: import { getToken } from '@/utils/auth' In the login page, after a successful login, store the username, encrypted password and the remember‑me flag when the checkbox is checked:

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

The password is encrypted with RSA before being saved to avoid plain‑text exposure.

On component creation, retrieve the stored values and populate the form:

created() {
  this.getCookie()
},
methods: {
  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)
    }
  }
}

This logic checks whether each cookie exists; if not, the original form values remain unchanged.