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 each()源代码
Feb 14 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
常用jQuery代码分享
2015/07/14 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
react-router实现按需加载
2017/05/09 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
python遍历数组的方法小结
2015/04/30 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
python生成密码字典的方法
2018/07/06 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
医药个人求职信范文
2014/01/29 职场文书
写求职信有什么意义
2014/02/17 职场文书
新农村建设汇报材料
2014/08/15 职场文书
2014公司年终工作总结
2014/12/19 职场文书
婚庆答谢词
2015/01/04 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
python OpenCV学习笔记
2021/03/31 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript