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 相关文章推荐
javascript中的有名函数和无名函数
Oct 17 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
smarty自定义函数用法示例
2016/05/20 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Python实现把数字转换成中文
2015/06/29 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python flask安装和命令详解
2019/04/02 Python
python pygame实现五子棋小游戏
2020/10/26 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
微博营销计划书
2014/01/10 职场文书
运动会解说词100字
2014/01/31 职场文书
销售提升方案
2014/06/07 职场文书
服装设计专业求职信
2014/06/16 职场文书
驻村工作先进事迹
2014/08/14 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
浅谈Python协程asyncio
2021/06/20 Python