JS实现检测当前操作用户和登录用户信息是否一致,并使用webpack将其封装成一个sdk

记录:
这两天在支援一个老项目时,发现了一个线上问题,在这里记录一下解决方案。

场景:同一个系统的地址链接,用户用两个浏览器标签页打开,分别登录不同的有效用户,当用户从一个标签页切换到另一个标签页,继续某些操作时,会因操作用户不一致导致数据信息展示错误或接口报错等问题。

解决方案:
和组内成员及领导讨论后,决定使用visibilitychange事件和focus焦点事件来监听用户的行为,从而完成校验用户信息的动作。

PS:至于为啥不让后端在接口层面做拦截?

  1. 让后端所有接口都做拦截不现实。
  2. 如果两个浏览器标签页上登录的用户都是有效用户且权限一样,那么后端接口依旧拦不住。

下面说说代码实现逻辑:

  1. 在页面初始化的时候,先从cookie中拿到对应的用户信息,存储到sessionStorage中。

  2. 使用visibilitychange事件监听用户切换浏览器标签页的行为,如果状态为用户进入页面,则从cookie中获取用户信息与之前sessionStorage中存储的信息是否一致。如果不一致就弹框提示让用户重新登录。

  3. 至于为啥还要用focus事件判断,因为我做的这个项目有部分页面是使用iframe嵌入到别的项目里面的,这种情况就会导致visibilitychange事件失效,所以再用focus事件做最后一层保险。focus事件处理的逻辑与visibilitychange事件内的逻辑一样。

在实现逻辑代码之前先来看看下面这两个问题。

关于visibilitychange事件的兼容性问题

此事件是用来检测用户进入标签页和离开标签页的行为。

caniuse网站上查看此事件的兼容性,其占比已经达到99%以上,完全能覆盖到我这个项目的使用用户,所以可以放心使用。

JS实现检测当前操作用户和登录用户信息是否一致,并使用webpack将其封装成一个sdk

使用示例:

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        console.log('用户已进入', document.visibilityState);
    } else {
        console.log('用户已离开', document.visibilityState);
    }
});

效果:
JS实现检测当前操作用户和登录用户信息是否一致,并使用webpack将其封装成一个sdk

为什么使用focus

  1. 因为focus事件的优先级要比click事件优先级高!
  2. js是单线程机制,一次只能执行一个事件

当用户点击页面上某个按钮时,会先触发focus事件,由于处理用户信息代码逻辑是同步的,所以在执行完判断逻辑后才会执行click事件内的逻辑,如果用户信息不一致,会有弹框提示,阻断用户的下一步动作。

来看个代码示例:

window.addEventListener('click', () => {
    console.log('click')
});
window.addEventListener('focus', () => {
    console.log('focus')
});

控制台打印效果:

JS实现检测当前操作用户和登录用户信息是否一致,并使用webpack将其封装成一个sdk

代码实现

了解了上面两个事件的一些特点之后,接下来进行编码环节。

// 获取sessionStorage中存储的用户信息
function getSessionCookie(id) {
    return window.sessionStorage.getItem(id);
}

// 将用户信息存储到sessionStorage中
function setSessionCookie(id, data) {
    window.sessionStorage.setItem(id, data);
}

// 从cookie中获取用户信息对应的字段
function getCookie(key) {
    return decodeURIComponent(document.cookie.replace(new RegExp(`(?:(?:^|.*;)\s*${encodeURIComponent(key).replace(/[-.+*]/g, '\$&')}\s*\=\s*([^;]*).*$)|^.*$`), '$1')) || null;
}

// 对比当前cookie中的信息和sessionStorage中存储的信息是否一致
function compareData(data, key) {
    return getCookie(key) === JSON.parse(data);
}

// 检测用户信息
function checkUser(cb, key) {
    var data = getSessionCookie('checkusersdk');
    if (!data) {
        var k = getCookie(key);
        if (k) {
            setSessionCookie('checkusersdk', JSON.stringify(k));
        }
    } else {
        var flag = compareData(data, key);
        cb && cb(flag);
    }
}

function init(options) {
    var cb = options.cb;
    var key = options.key || 'checkuserKey';

    document.addEventListener('visibilitychange', function() {
        if (document.visibilityState === 'visible') {
            checkUser(cb, key);
        }
    });
    
    window.addEventListener('focus', function() {
        checkUser(cb, key);
    });
}

// result为回调函数。
init({ cb: result, key: 'custom'});

init方法接收一个回调函数cb和存储用户信息标识的key,共两个参数。init方法在监听时间内调用checkUser方法,将两个参数传递进去,checkUser方法内部逻辑如下:

  1. 获取存储在sessionStorage中的数据,如果数据为空,则从cookie中获取用户信息数据,然后再存储到sessionStorage
  2. 如果sessionStorage中的数据存在,再次从cookie中获取用户信息数据,二者进行比较,返回一个布尔值,传递给回调函数。

检测用户信息的核心代码已经完成了,不过为了更好的使用体验,将它封装成一个sdk,可以方便给别的项目使用。

使用webpack将代码封装一个SDK

1. 创建一个sdk项目

  1. 在自己的工作空间内创建一个空白文件夹,命名为checkuser-sdk,作为项目名称。
  2. 在上一步刚刚创建的项目根目录下再创建一个文件夹src,用来存放核心代码。
  3. src目录下创建一个index.js文件,用来当做入口文件。

2. 初始化项目

  1. 在项目根目录下执行命令npm init,根据命令提示编写项目的一些详细信息,然后回车确定即可。

此时项目目录应该如下:

checkuser-sdk
| - src
| -- index.js
| - package.json

3. 编写配置文件webpack.config.js

  1. 执行下面命令安装一些必要的依赖包
    npm i webpack webpack-cli clean-webpack-plugin uglifyjs-webpack-plugin -D
    
  2. 在项目根目录下创建一个webpack.config.js文件
  3. webpack.config.js文件内编写如下代码:
let path = require('path');

// 把本地已有的打包后的资源清空,来减少它们对磁盘空间的占用
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 用来缩小(压缩优化)js文件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: {
        'sdk': ['./src/index.js']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        library: {
            name: 'CheckuserSdk',
            type: 'umd',
        }
    }, 
    optimization: {
        minimizer: [new UglifyJsPlugin({
            sourceMap: false,
            parallel: true,
            cache: false
        })],
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

项目比较简单,使用这两个插件已足够

4. 编写核心代码

  1. src目录下新建一个目录,命名为lib
  2. lib下创建一个util.js文件,用来存储一些工具方法。
  3. src目录下的index.js引入工具方法。

两个文件的代码分别如下:

// src/lib/util.js

// 获取sessionStorage中存储的用户信息
function getSessionCookie(id) {
    return window.sessionStorage.getItem(id);
}

// 将用户信息存储到sessionStorage中
function setSessionCookie(id, data) {
    window.sessionStorage.setItem(id, data);
}

// 从cookie中获取用户信息对应的字段
function getCookie(key) {
    return decodeURIComponent(document.cookie.replace(new RegExp(`(?:(?:^|.*;)\s*${encodeURIComponent(key).replace(/[-.+*]/g, '\$&')}\s*\=\s*([^;]*).*$)|^.*$`), '$1')) || null;
}

// 对比当前cookie中的信息和sessionStorage中存储的信息是否一致
function compareData(data, key) {
    return getCookie(key) === JSON.parse(data);
}

// 检测用户信息
function checkUser(cb, key) {
    var data = getSessionCookie('checkusersdk');
    if (!data) {
        var k = getCookie(key);
        if (k) {
            setSessionCookie('checkusersdk', JSON.stringify(k));
        }
    } else {
        var flag = compareData(data, key);
        cb && cb(flag);
    }
}

module.exports = {
    getSessionCookie,
    setSessionCookie,
    getCookie,
    compareData,
    checkUser
}
// src/index.js

var util = require('./lib/util');

function init(options) {
    var cb = options.cb;
    var key = options.key || 'e2mf';

    document.addEventListener('visibilitychange', function() {
        if (document.visibilityState === 'visible') {
            util.checkUser(cb, key);
        }
    });
    
    window.addEventListener('focus', function() {
        util.checkUser(cb, key);
    });
}

module.exports = {
    init
}

5. package.json中添加脚本命令

...省略
"scripts": {
    "build": "webpack"
},
...省略

执行命令npm run build后,在项目的根目录下会创建一个dist文件夹,文件夹里面的sdk.js就是我们的打包文件了。

6. 使用方式

  1. 链接方式
// 引用 --->临时
<script type="text/javascript" src="http://xxx.com/sdk.js"></script>

// 使用
if (window.CheckuserSdk) {
    window.CheckuserSdk.init({ cb: callback, key: 'customKey' });
}
  1. npm方式
// 安装
npm i -S @xxx/checkuser-sdk;

// 引入
import CheckuserSdk from '@xxx/checkuser-sdk';

// 使用
if (window.CheckuserSdk) {
    window.CheckuserSdk.init({ cb: callback, key: 'customKey' });
}

文章内如有错误的地方,欢迎掘友留言纠正~!

原文链接:https://juejin.cn/post/7357006184476442660 作者:娜个小部呀

(0)
上一篇 2024年4月14日 上午10:11
下一篇 2024年4月14日 下午4:05

相关推荐

发表回复

登录后才能评论