js-cookie的使用

最新推荐文章于 2024-06-19 13:32:48 发布

颖儿♡＾▽＾♡

最新推荐文章于 2024-06-19 13:32:48 发布

阅读量7.3k

点赞数 9

文章标签： vue.js 七牛云第二届1024创作节勇敢牛牛，必然获奖队

本文链接：https://blog.csdn.net/qq_52126119/article/details/134550719

版权

本文介绍了如何在Vue项目中使用js-cookie库处理cookies，包括安装、设置、获取和删除cookie，以及如何将cookie操作封装到utils文件中以提高代码维护性，以TokenKey为例进行详细说明。

摘要由CSDN通过智能技术生成

js-cookie

基础

js-cookie是一个简单的，轻量级的处理cookies的js API。

// 安装js-cookie库
npm install js-cookie

// 在Vue组件中使用js-cookie
import Cookies from 'js-cookie'

// 设置cookie
Cookies.set('key', 'value')
//eg: Cookies.set('name', 'lhy')

// 获取cookie
Cookies.get('key')
//Cookies.get('name')//lhy

// 删除cookie
Cookies.remove('key')
//Cookies.remove('name')

单独封装一个cookie存储删除的方法js，在其它页面可以直接引用，这样代码维护行会比较高

封装

本人封装在src\utils\auth.js文件

import Cookies from 'js-cookie'

export function getToken() {
  return Cookies.get("TokenKey")
}

export function setToken(token) {
  return Cookies.set("TokenKey", token)
}

export function removeToken() {
  return Cookies.remove("TokenKey")
}

页面使用

<template>
  <div></div>
</template>

<script>
import { setToken, getToken, removeToken } from "@/utils/auth";
export default {
  data() {
    return {};
  },
  mounted() {
    this.getdata();
  },
  methods: {
    // 得到token,存入token
    getdata() {
      // 从后端得到TOKEN,存入.....
      setToken(res.token);
      //  获取token
      console.log(getToken());
    },
    // 移除token
    remove() {
      removeToken();
    },
  },
};
</script>