vue在Cookie和对localStorage的封装中存储登录用户的token、用户名等信息
在系统登录后将用户登录的token、用户名信息分别存储至Cookie和localStorage中,便于系统后续不同用户权限的控制。一、存储在Cookie中的文件封装在src的utils中新增auth.js文件,文件代码为:import Cookies from 'js-cookie';const TokenKey = 'Authorization';export function getToken
·
在系统登录后将用户登录的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:
更多推荐
已为社区贡献15条内容
所有评论(0)