vue 后台管理系统登录记住密码功能（Cookies实现）

最新推荐文章于 2024-08-06 08:00:00 发布

逆风优雅

最新推荐文章于 2024-08-06 08:00:00 发布

阅读量747

点赞数

分类专栏： js vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44603011/article/details/132487970

版权

js 同时被 2 个专栏收录

65 篇文章 1 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

安装插件

import Cookies from 'js-cookie'

组件引入

import Cookies from 'js-cookie';

存值：

   Cookies.set('username', state.account, { expires: 30 });
// username 存的值的名字，state.account 存的值  expires 存储的时间，30天
   Cookies.set('password', state.password, { expires: 30 });
   Cookies.set('rememberMe', state.rememberMe, { expires: 30 });

取值：

  const username = Cookies.get('username');
    const password = Cookies.get('password');
    const rememberMe = Cookies.get('rememberMe');

登录记住密码的逻辑

function handleLogin() { // 登录
    if (state.account && state.password) {
        if (state.rememberMe) { // 记住密码被勾选
            Cookies.set('username', state.account, { expires: 30 });
            Cookies.set('password', state.password, { expires: 30 });
            Cookies.set('rememberMe', state.rememberMe, { expires: 30 });
        } else { // 记住密码取消勾选
            // 否则移除
            Cookies.remove('username');
            Cookies.remove('password');
            Cookies.remove('rememberMe');
        }
        router.push('/')
        ElMessage.success('登录成功')

    } else {
        ElMessage.warning('请输入账号密码')
    }

};

function getCookie() {
    const username = Cookies.get('username');
    const password = Cookies.get('password');
    const rememberMe = Cookies.get('rememberMe');

    state.account = username === undefined ? state.account : username
    state.password = password === undefined ? state.password : password
    state.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)
};

getCookie();