js-cookie第三方库的简单使用

js-cookie第三方库的简单使用

js-cookie官网

1、下载

npm i js-cookie

2.全局挂载

在main.js中

import Cookies from "js-cookie";

3.使用

直接使用

在当前页面引用

import Cookies from "js-cookie";

//创建cookie
Cookies.set('key', 'value', { expires: 7 });//创建有效期为7天的cookie
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 });

//获取cookie
const value = Cookies.get('key'); // 获取指定key 对应的value
const allvalue = Cookies.get(); // 获取所有value
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')

//删除cookie
Cookies.remove('key');//删除普通的cookie
Cookies.remove('name', { path: '' }); // 删除存了指定页面path的cookie
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');

封装后使用

在utils文件夹下创建一个.js文件

import Cookies from "js-cookie";//导入了一个名为js-cookie的第三方库，用于操作浏览器的Cookie

const TokenKey = "Admin-Token";//存储token的Cookie键名

const ExpiresInKey = "Admin-Expires-In";//过期时间

export function getToken() {//从浏览器的Cookie中获取token值
  return Cookies.get(TokenKey);
}

export function setToken(token) {//将token值存储到浏览器的Cookie中
  return Cookies.set(TokenKey, token);
}

export function removeToken() {//从浏览器的Cookie中移除token值
  return Cookies.remove(TokenKey);
}

export function getExpiresIn() {//从浏览器的Cookie中获取存储的token过期时间。如果获取不到过期时间，则返回默认值-1。
  return Cookies.get(ExpiresInKey) || -1;
}

export function setExpiresIn(time) {//将token过期时间存储到浏览器的Cookie中。
  return Cookies.set(ExpiresInKey, time);
}

export function removeExpiresIn() {//从浏览器的Cookie中移除存储的token过期时间
  return Cookies.remove(ExpiresInKey);
}

引入

import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'

// 登录
        Login({ commit }, userInfo) {
            const username = userInfo.username.trim()
            const password = userInfo.password
            const code = userInfo.code
            const uuid = userInfo.uuid
            return new Promise((resolve, reject) => {
                login(username, password, code, uuid).then(res => {
                    let data = res.data
                    setToken(data.access_token)//创建cookie，存储token值
                    commit('SET_TOKEN', data.access_token)
                    setExpiresIn(data.expires_in)
                    commit('SET_EXPIRES_IN', data.expires_in)
                    resolve()
                }).catch(error => {
                    reject(error)
                })
            })
        },

 // 刷新token
        RefreshToken({ commit, state }) {
            return new Promise((resolve, reject) => {
                refreshToken(state.token).then(res => {
                    setExpiresIn(res.data)//将token过期时间存储到浏览器的Cookie中。
                    commit('SET_EXPIRES_IN', res.data)
                    resolve()
                }).catch(error => {
                    reject(error)
                })
            })
        },

// 退出系统
        LogOut({ commit, state }) {
            return new Promise((resolve, reject) => {
                logout(state.token).then(() => {
                    commit('SET_TOKEN', '')
                    commit('SET_ROLES', [])
                    commit('SET_PERMISSIONS', [])
                    removeToken()从浏览器的Cookie中移除token值
                    resolve()
                }).catch(error => {
                    reject(error)
                })
            })
        },