vue cookie存取,vue js-cookie
这篇文章主要介绍了某视频剪辑软件项目中js-cookie的使用存储代币操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1、安装js-cookie
# npm安装js-cookie -保存
#纱线添加js-cookie
2、引用（需要的文件）
从" js-cookie "导入甜饼干
const TokenKey=Admin-Token
导出函数getToken() {
返回Cookies.get(令牌密钥)
}
导出函数setToken(tcuncoken){
返回Cookies.set(令牌密钥，令牌)
}
导出函数removeToken() {
返回Cookies.remove(令牌密钥)
}
3、浏览器cookie
4、 也可以存储其他
const user={
姓名： lia ，
年龄：18岁
}
Cookies.set(user ，用户)
const lia user=JSON。解析(cookies。get( user ))
补充知识：vue 实现记住密码功能，用户信息在客户端加密存储
效果图：
功能详解：用户登录时，勾选记住密码，系统会将登录信息存入浏览器甜饼干中，下次登录时系统会自动将信息回写在输入框中（默认设置保存时间为3天，此处需要将密码进行加密处理，以提高安全性)
1.定义页面元素，五型绑定变量
2.
3.引入某视频剪辑软件的加密组件CryptoJS，执行这条命令，系统会自动安装
新公共管理安装加密-js
安装成功后，还需在登录页面引入组件
4.定义操作甜饼干的三个方法，后面需要用到，代码我贴出来
* * * * * * * * * * * * Cookie开始**************/
clearCookie(cookieName) {
var exp=new Date()；
exp。settime(exp。gettime()-1)；
var cval=this。获取cookie(cookieName)；
如果(cval！=null) {
文档。cookie=cookieName = cvalexpires= exp。togmtstring()；
}
},
setCookie(cookieName，value，expire minutes){
var ex Date=new Date()；
约会前。设置时间(日期除外。gettime()过期分钟* 60 * 1000)；
文档。cookie=cookieName = escape(value)((expire minutes==null)？ : ;expires= ex date。togmtstring())；
},
getCookie(cookieName) {
if (document.cookie.length 0) {
var c _ start=文档。饼干。(cookieName =)的索引；
如果(c_start！=-1) {
c _ start=c _ start cookiename。长度1；
var c _ end=文档。饼干。的索引(“；”)，c _ start)；
if (c_end==-1)
c_end=document.cookie.length
返回unescape(文档。饼干。substring(c _ start，c_end))
}
}
返回""
},
* * * * * * * * * * * * Cookie结束**************/
5.在登录方法中判断记住密码是否有被勾选，如果有，则需要将账号密码信息存入甜饼干中，没有，则调用上面的方法清除甜饼干信息，关键步骤我已标记，登录方法在下面：
/************* 登录开始**************/
登录(){
让这个=这个
//判断是密码登录还是短信登录
if (_this.indexd==0) {
_这个refs[ruleForm].验证((有效)={
如果（有效){
//定义要存入甜饼干的对象
var账户信息=" "；
//拿到输入框中的密码，使用俄歇电子能谱加密
var pwd=_ this。形式。pwd
var newPwd=CryptoJS .AES.encrypt(密码密钥123 );
//若勾选记住密码
if (_this.checked==true) {
console.log(选择记住密码，checked==true’)；
账户信息=_ this。形式。名称“”新密码；//将加密后的密码存入甜饼干对象中
_this.setCookie(accountInfo ，accountInfo，1440 * 3)；//传入账号名，密码，和保存天数3个参数(3天)
}否则{
console.log(清空cookie’)；
_这个。清除cookie(“帐户信息”)；//清空饼干
}
让params={
用户名：_this.form.name，
密码：_this.form.pwd，
vCode: _this.form.imgCode，
loginToken: _this.loginToken，
};
post(/login/login ，params).然后（函数（响应){
如果(回应。数据。code== 20000 ){
会话存储。setitem( v-token ，响应。数据。数据。token)；
sessionStorage.setItem(v-menu ，JSON。stringify(响应。数据。数据。路由器))；
sessionStorage.setItem(v-user ，JSON)。stringify(响应。数据。数据。currentuser))；
//_这个。使路由器(响应。数据。数据。路由器)；
_这个消息({
消息： 登录成功，
类型："成功"
});
_这个。清除cookie( log in _ token )；//清除代币
//平台
如果(回应。数据。数据。当前用户。type==0){
//平台
_这个1000美元路由器。push(/index )；
} else if(响应。数据。数据。当前用户。type==1 响应。数据。数据。当前用户。type==3 响应。数据。数据。当前用户。type==2){
//渠道商
_这个1000美元路由器。push(/operate )；
}否则{
//证券商
_这个1000美元路由器。推送(/AoInformationManagement )
}
} else if(响应。数据。code== 50000 ){
_这个$消息。警告(回应。数据。味精)；
_这个。更改代码()；
}
}).接住(函数（错误){
_这个$消息。错误(err)；
_这个。更改代码()；
})
}
});
}
}
5.选择记住密码，登录系统后，可以在调试模式中查看甜饼干信息，如图：
6.退出系统后，需要判断甜饼干有无账号信息，如果有，则进行回写，下面是我的方法：
在钩子方法中调用下面的loadAccountInfo回写方法
//预读取甜饼干中用户信息
loadAccountInfo(){
让自我=这个；
//admin & u 2 fsdgvkx 1/ztagwfvi 37 gnwa 7 tuzmqm yazInCPxs=
让账户信息=自己。获取cookie(“帐户信息”)；
//如果甜饼干里没有账号信息
if(Boolean(帐户信息)==false){
console.log(cookie中没有检测到用户账号信息!);
返回错误的
}否则{
//如果甜饼干里有账号信息
console.log(cookie中检测到账号信息！现在开始预填写!);
让用户名="";
设密码="";
让索引=帐户信息。的索引()；
用户名=账户信息。子串(0，索引);
passWord=accountInfo.substring(索引1);//拿到加密后的密码
//解密
var bytes=CryptoJS .AES.decrypt(passWord.toString()，秘钥123 );
//拿到解密后的密码（登录时输入的密码)
var新密码=字节。tostring(cryptojs。随信附上utf8)；
self.form.name=用户名；
自我。形式。pwd=新密码；
自检=真
}
},
7.最后效果就是这样
以上这篇某视频剪辑软件项目中js-cookie的使用存储代币操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。