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 相关文章推荐
js输出列表实现代码
Sep 12 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
vue 手机物理监听键+退出提示代码
Sep 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/01 无线电
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
python随机数分布random均匀分布实例
2019/11/27 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
RealTek面试题
2016/06/28 面试题
ORACLE十问
2015/04/20 面试题
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书