vue在Cookie和对localStorage的封装中存储登录用户的token、用户名等信息

在系统登录后将用户登录的token、用户名信息分别存储至Cookie和localStorage中，便于系统后续不同用户权限的控制。

一、存储在Cookie中的文件封装

在src的utils中新增auth.js文件，文件代码为：

import Cookies from 'js-cookie';

const TokenKey = 'Authorization';

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

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

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

let thirdPartyToken = 'thirdPartyToken';

export function getThirdPartyToken () {
	return Cookies.get(thirdPartyToken);
}

export function setThirdPartyToken (token) {
	return Cookies.set(thirdPartyToken, token);
}

export function removeThirdPartyToken () {
	return Cookies.remove(thirdPartyToken);
}

二、 存储在localStorage中的文件封装

在src的utils下新增localStorage.js文件：

const CryptoJS = require('crypto-js');
const storage = window.localStorage;
const key = CryptoJS.enc.Utf8.parse('7e^V9FLMatcyX0kA').toString();
const iv = CryptoJS.enc.Utf8.parse('kr6V%xV&tQj8kH13').toString();

export default {
	set(name, value) {
		if (typeof value === 'object') {
			value = JSON.stringify(value);
		} else {
			value = JSON.stringify({ myCacheValue: value });
		}
		// Triple DES 加密
		let encrypted = CryptoJS.TripleDES.encrypt(value.toString(), key, {
			iv: iv,
			mode: CryptoJS.mode.CBC,
			padding: CryptoJS.pad.Pkcs7,
		}).toString();
		storage.setItem(name, encrypted);
	},
	get(name) {
		let temp = storage.getItem(name);
		if (temp === null) {
			return null;
		}
		// Triple DES 解密
		let decrypted = CryptoJS.TripleDES.decrypt(temp, key, {
			iv: iv,
			mode: CryptoJS.mode.CBC,
			padding: CryptoJS.pad.Pkcs7,
		});
		// 转换为 utf8 字符串
		decrypted = CryptoJS.enc.Utf8.stringify(decrypted) || temp;
		let obj = JSON.parse(decrypted);
		if (obj.myCacheValue) {
			return obj.myCacheValue;
		}
		return obj;
	},
	clear(name) {
		if (name) {
			storage.removeItem(name);
		} else {
			storage.clear();
		}
	},
	clearExcept(array) {
		if (!array) {
			this.clear();
		} else {
			let temp = [];
			for (let i = 0; i < array.length; i++) {
				let val = this.get(array[i]);
				if (val) {
					temp.push({ name: array[i], val: val });
				}
			}
			this.clear();

			for (let i = 0; i < temp.length; i++) {
				this.set(temp[i].name, temp[i].val);
			}
		}
	},
};

三、分别在Cookie和localStorage中存储相关信息

在登录的vue文件中引入设置token的方法：

import { setToken } from '../../utils/auth'

在登录的点击事件方法中存入token ：

localStorage.setItem方法即为将相关信息存储在localStorage中；

setToken方法为将token 存储在cookie中。

// 登录事件方法
submit() {
			if (this.checkInput()) {
                // 拼接接口所需的参数
				let password = md5(this.password)
				let formData = new FormData()
				formData.append('username', this.username)
				formData.append('password', password)
                // 调用接口
				login(formData).then((res) => {
					if (res.data.code == 200) {
                        // 存储在本地
						localStorage.setItem('userToken', res.data.data.token)
						localStorage.setItem('username', this.username)
						localStorage.setItem('roleId', res.data.data.roleId)
                        // 存储在Cookie中
						setToken(res.data.data.token)

						// this.$message.success('登录成功')
						this.$router.push({ path: '/xxx' })
					} else {
						this.$message.warning('登录失败')
					}
				})
			}
		},


checkInput() {
			if (!this.username) {
				Message('请输入用户名')
				return false
			} else if (!this.password) {
				Message('请输入密码')
				return false
			} else {
				return true
			}
		},

四、查看是否设置成功

设置完成之后，重新登录并打开F12查看Application中的Cookie：

 设置完成之后，重新登录并打开F12查看Application中的localStorage：