elementui cookies

使用 Element UI 与 Cookies 的方法

安装 js-cookie 库

Element UI 本身不直接处理 cookies，但可以结合 js-cookie 库轻松管理 cookies。

npm install js-cookie

设置 Cookies

使用 js-cookie 设置 cookies，支持键值对形式，并可配置过期时间。

import Cookies from 'js-cookie';

// 设置普通 cookie
Cookies.set('username', 'admin');

// 设置带过期时间的 cookie（7 天后过期）
Cookies.set('token', 'abc123', { expires: 7 });

获取 Cookies

通过键名获取存储的 cookie 值。

const username = Cookies.get('username');
console.log(username); // 输出 'admin'

删除 Cookies

移除指定的 cookie。

Cookies.remove('username');

在 Vue 组件中使用

结合 Element UI 的表单或弹窗功能，实现登录状态存储。

<template>
  <el-form @submit.native.prevent="handleLogin">
    <el-input v-model="form.username" placeholder="用户名"></el-input>
    <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
    <el-button type="primary" native-type="submit">登录</el-button>
  </el-form>
</template>

<script>
import Cookies from 'js-cookie';

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    handleLogin() {
      // 模拟登录成功
      Cookies.set('token', 'generated-token', { expires: 1 }); // 1 天后过期
      this.$message.success('登录成功');
    },
  },
};
</script>

安全注意事项

• 避免存储敏感信息（如密码）在 cookies 中。
• 使用 HttpOnly 和 Secure 标志增强安全性（需后端配合）。

Cookies.set('token', 'abc123', { expires: 7, secure: true });

通过以上方法，可以方便地在 Element UI 项目中集成 cookie 管理功能。