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 相关文章推荐
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
window.onload使用指南
Sep 13 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python部署web开发程序的几种方法
2017/05/05 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
父亲生日宴会答谢词
2014/01/10 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
技术股东合作协议书
2014/12/02 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
Java实现多文件上传功能
2021/06/30 Java/Android
MySQL 逻辑备份 into outfile
2022/05/15 MySQL