vue项目中js-cookie的使用存储token操作


Posted in Javascript onNovember 13, 2020

1、安装js-cookie

# npm install js-cookie --save

# yarn add js-cookie

2、引用(需要的文件)

import Cookies from 'js-cookie' 
const TokenKey = 'Admin-Token' 
export function getToken() {
 return Cookies.get(TokenKey)
}
 
export function setToken(tcuncuoken) {
 return Cookies.set(TokenKey, token)
}
 
export function removeToken() {
 return Cookies.remove(TokenKey)
}

3、浏览器cookie

vue项目中js-cookie的使用存储token操作

4、 也可以存储其他

const user = {
 name: 'lia',
 age: 18
}
Cookies.set('user', user)
const liaUser = JSON.parse(Cookies.get('user'))

补充知识:vue 实现记住密码功能,用户信息在客户端加密存储

效果图:

vue项目中js-cookie的使用存储token操作

功能详解:用户登录时,勾选记住密码,系统会将登录信息存入浏览器cookie中,下次登录时系统会自动将信息回写在输入框中(默认设置保存时间为3天,此处需要将密码进行加密处理,以提高安全性)

1.定义页面元素,v-model绑定变量

vue项目中js-cookie的使用存储token操作

2.

vue项目中js-cookie的使用存储token操作

3.引入vue的加密组件 CryptoJS,执行这条命令,系统会自动安装

npm install crypto-js

安装成功后,还需在登录页面引入组件

vue项目中js-cookie的使用存储token操作

4.定义操作cookie的三个方法,后面需要用到,代码我贴出来

/************* Cookie start ***************/
   clearCookie(cookieName) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = this.getCookie(cookieName);
    if (cval != null) {
     document.cookie = cookieName + "=" + cval + ";expires=" + exp.toGMTString();
    }
   },
 
   setCookie(cookieName, value, expiremMinutes) {
    var exdate = new Date();
    exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000);
    document.cookie = cookieName + "=" + escape(value) + ((expiremMinutes == null) ? "" : ";expires=" + exdate.toGMTString());
   },
 
   getCookie(cookieName) {
    if (document.cookie.length > 0) {
     var c_start = document.cookie.indexOf(cookieName + "=");
     if (c_start != -1) {
      c_start = c_start + cookieName.length + 1;
      var c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1)
       c_end = document.cookie.length
      return unescape(document.cookie.substring(c_start, c_end))
     }
    }
    return ""
   },
   /*************Cookie end***************/

5.在登录方法中判断记住密码是否有被勾选,如果有,则需要将账号密码信息存入cookie中,没有,则调用上面的方法清除cookie信息,关键步骤我已标记,登录方法在下面:

vue项目中js-cookie的使用存储token操作

/************* 登录 start ***************/
   signIn() {
    let _this = this;
    //判断是密码登录还是短信登录
    if (_this.indexd == 0) {
     _this.$refs['ruleForm'].validate((valid) => {
      if (valid) {
 
       //定义要存入cookie的对象
       var accountInfo = ""; 
       //拿到输入框中的密码,使用AES加密
       var pwd = _this.form.pwd;
       var newPwd = CryptoJS.AES.encrypt(pwd,'secret key 123'); 
 
       //若勾选记住密码
       if (_this.checked == true) {
        console.log("选择记住密码,checked == true");
        accountInfo = _this.form.name + "&" + newPwd; //将加密后的密码存入cookie对象中
        _this.setCookie('accountInfo',accountInfo,1440*3); //传入账号名,密码,和保存天数3个参数(3天)
       }else {
        console.log("清空Cookie");
        _this.clearCookie('accountInfo'); //清空Cookie
       }
 
 
       let params = {
        "username": _this.form.name,
        "password": _this.form.pwd,
        "vCode": _this.form.imgCode,
        "loginToken": _this.loginToken,
       };
       post('/login/login', params).then(function (response) {
        if (response.data.code == "20000") {
         sessionStorage.setItem("v-token", response.data.data.token);
         sessionStorage.setItem("v-menu", JSON.stringify(response.data.data.routers));
         sessionStorage.setItem("v-user", JSON.stringify(response.data.data.currentUser));
         //_this.makeRouters(response.data.data.routers);
         _this.$message({
          message: '登录成功',
          type: 'success'
         });
         _this.clearCookie("login_token");//清除token
         //平台
         if (response.data.data.currentUser.type == 0) {
          //平台
          _this.$router.push('/index');
         } else if (response.data.data.currentUser.type == 1 || response.data.data.currentUser.type == 3 || response.data.data.currentUser.type == 2) {
          //渠道商
          _this.$router.push('/operate');
         } else {
          //证券商
          _this.$router.push('/AoInformationManagement')
         }
 
        } else if (response.data.code == "50000") {
         _this.$message.warning(response.data.msg);
         _this.changeCode();
        }
       }).catch(function (err) {
        _this.$message.error(err);
        _this.changeCode();
       })
      }
     });
    } 
   }

5.选择记住密码,登录系统后,可以在调试模式中查看cookie信息,如图:

vue项目中js-cookie的使用存储token操作

6.退出系统后,需要判断cookie有无账号信息,如果有,则进行回写,下面是我的方法:

在钩子方法中调用下面的loadAccountInfo回写方法

vue项目中js-cookie的使用存储token操作

//预读取cookie中用户信息
   loadAccountInfo(){
    let self = this;
    //admin%26U2FsdGVkX1+/ZtAGWFVi37gNwA7TUZmQM+yazInCPxs%3D
    let accountInfo = self.getCookie('accountInfo');
 
    //如果cookie里没有账号信息
    if(Boolean(accountInfo) == false){
     console.log('cookie中没有检测到用户账号信息!');
     return false;
    } else{
     //如果cookie里有账号信息
     console.log('cookie中检测到账号信息!现在开始预填写!');
     let userName = "";
     let passWord = "";
     let index = accountInfo.indexOf("&");
 
     userName = accountInfo.substring(0,index);
     passWord = accountInfo.substring(index+1);  //拿到加密后的密码
     //解密
     var bytes = CryptoJS.AES.decrypt(passWord.toString(),'secret key 123');
     //拿到解密后的密码(登录时输入的密码)
     var newpassWord = bytes.toString(CryptoJS.enc.Utf8);
 
     self.form.name = userName;
     self.form.pwd = newpassWord;
     self.checked = true;
    }
   },

7.最后效果就是这样

vue项目中js-cookie的使用存储token操作

以上这篇vue项目中js-cookie的使用存储token操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的密码强度验证代码
Mar 01 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
js选项卡的制作方法
Jan 23 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 #Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 #Javascript
vue 授权获取微信openId操作
Nov 13 #Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 #Javascript
Vue实现boradcast和dispatch的示例
Nov 13 #Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 #Javascript
Vue 3.0中jsx语法的使用
Nov 13 #Javascript
You might like
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
个人承诺书格式
2014/06/03 职场文书
服务口号大全
2014/06/11 职场文书
个人委托书
2014/07/31 职场文书
关于诚信的活动方案
2014/08/18 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
匿名检举信范文
2015/03/02 职场文书
教师党员自我评价2015
2015/03/04 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
Oracle 多表查询基本语法实例
2022/04/18 Oracle