【Vue】如何干干净净地退出logOut

一、问题

1.1、环境
电脑环境：Windows 10；
开发工具：IntelliJ IDEA；
数据库环境：Redis 3.2.100
JDK环境: Jdk1.8；

1.2、问题
【Vue】我们再一个系统退出的时候，如何才能做到干干净净地退出呢？

二、解答

首先，我们得明白1点，干干净净退出系统的标准：
1、sessionStorage 没有缓存用户的token等令牌信息；
2、localStorage 没有系统的敏感信息；
3、Cookie中没有缓存用户信息；
4、如果是单体项目，不能够展示当前页面中的内容页面；
5、跳转到登录页面或提示页面；

下面逐一解释：
1、sessionStorage
如果登录的时候，往浏览器里塞了用户的token，用户信息等值，则退出的时候，要将其从浏览器删除：详情可以参考【菜鸟教程-Window sessionStorage 属性】

sessionStorage.removeItem("token");

2、localStorage

这里用法与sessionStorage一致。
关于两者的区别,可以参考：【localStorage 和 sessionStorage的区别】

3、Cookies

①、方法1：普通方法（尝试失败）
Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。关于Cookies的定义，具体可以看【百度百科-Cookies】，或者参考这篇博主的博客

Cookies.remove("token");

②、方法2：通过原生js方法（尝试成功）

/**
     * 获取cookies
     */
    getCookie(name) {
      var arr,
        reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
      if ((arr = document.cookie.match(reg))) {
        return arr[2];
      } else {
        return false;
      }
    },

    /**
     * 删除cookies
     */
    delCookie(name) {
      var exp = new Date();
      exp.setTime(exp.getTime() - 1);
      var cval = this.getCookie(name);
      if (cval) {
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
      }
    },

然后调用这两个js方法，就能获取和删除Cookies；

4、如果是单体项目，不能够展示当前页面中的内容页面；
这里就看你自己项目的组织架构。肯定要将当前页面容器置空；

5、跳转到首页或者登录页等。

完毕~

三、总结

承接项目开发（电商，金融，直播等互联网开发项目），承接外包等互联网业务~

参考资料：
1、https://www.runoob.com/jsref/prop-win-sessionstorage.html
2、https://www.runoob.com/jsref/prop-win-localstorage.html
3、https://www.cnblogs.com/leijee/p/7506301.html
4、https://baike.baidu.com/item/cookie/1119?fr=aladdin
5、https://blog.csdn.net/playboyanta123/article/details/79464684

欢迎关注我的
CSDN博客： https://blog.csdn.net/River_Continent
微信公众号：幕桥社区

知乎：张牧野， https://www.zhihu.com/people/zhang-mu-ye-37-76/activities
简书： https://www.jianshu.com/u/02c0096cbfd3