记录：
这两天在支援一个老项目时，发现了一个线上问题，在这里记录一下解决方案。
场景：同一个系统的地址链接，用户用两个浏览器标签页打开，分别登录不同的有效用户，当用户从一个标签页切换到另一个标签页，继续某些操作时，会因操作用户不一致导致数据信息展示错误或接口报错等问题。
解决方案：
和组内成员及领导讨论后，决定使用visibilitychange事件和focus焦点事件来监听用户的行为，从而完成校验用户信息的动作。
PS：至于为啥不让后端在接口层面做拦截？
- 让后端所有接口都做拦截不现实。
- 如果两个浏览器标签页上登录的用户都是有效用户且权限一样，那么后端接口依旧拦不住。
下面说说代码实现逻辑：
-
在页面初始化的时候，先从
cookie中拿到对应的用户信息，存储到sessionStorage中。 -
使用
visibilitychange事件监听用户切换浏览器标签页的行为，如果状态为用户进入页面，则从cookie中获取用户信息与之前sessionStorage中存储的信息是否一致。如果不一致就弹框提示让用户重新登录。 -
至于为啥还要用
focus事件判断，因为我做的这个项目有部分页面是使用iframe嵌入到别的项目里面的，这种情况就会导致visibilitychange事件失效，所以再用focus事件做最后一层保险。focus事件处理的逻辑与visibilitychange事件内的逻辑一样。
在实现逻辑代码之前先来看看下面这两个问题。
关于visibilitychange事件的兼容性问题
此事件是用来检测用户进入标签页和离开标签页的行为。
从caniuse网站上查看此事件的兼容性，其占比已经达到99%以上，完全能覆盖到我这个项目的使用用户，所以可以放心使用。
使用示例：
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
console.log('用户已进入', document.visibilityState);
} else {
console.log('用户已离开', document.visibilityState);
}
});
效果：
为什么使用focus
- 因为
focus事件的优先级要比click事件优先级高！ - js是单线程机制，一次只能执行一个事件。
当用户点击页面上某个按钮时，会先触发focus事件，由于处理用户信息代码逻辑是同步的，所以在执行完判断逻辑后才会执行click事件内的逻辑，如果用户信息不一致，会有弹框提示，阻断用户的下一步动作。
来看个代码示例：
window.addEventListener('click', () => {
console.log('click')
});
window.addEventListener('focus', () => {
console.log('focus')
});
控制台打印效果：
代码实现
了解了上面两个事件的一些特点之后，接下来进行编码环节。
// 获取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方法内部逻辑如下：
- 获取存储在
sessionStorage中的数据，如果数据为空，则从cookie中获取用户信息数据，然后再存储到sessionStorage中 - 如果
sessionStorage中的数据存在，再次从cookie中获取用户信息数据,二者进行比较，返回一个布尔值，传递给回调函数。
检测用户信息的核心代码已经完成了，不过为了更好的使用体验，将它封装成一个sdk，可以方便给别的项目使用。
使用webpack将代码封装一个SDK
1. 创建一个sdk项目
- 在自己的工作空间内创建一个空白文件夹，命名为
checkuser-sdk，作为项目名称。 - 在上一步刚刚创建的项目根目录下再创建一个文件夹
src，用来存放核心代码。 src目录下创建一个index.js文件，用来当做入口文件。
2. 初始化项目
- 在项目根目录下执行命令
npm init，根据命令提示编写项目的一些详细信息，然后回车确定即可。
此时项目目录应该如下：
checkuser-sdk
| - src
| -- index.js
| - package.json
3. 编写配置文件webpack.config.js
- 执行下面命令安装一些必要的依赖包
npm i webpack webpack-cli clean-webpack-plugin uglifyjs-webpack-plugin -D - 在项目根目录下创建一个
webpack.config.js文件 - 在
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. 编写核心代码
- 在
src目录下新建一个目录，命名为lib。 - 在
lib下创建一个util.js文件，用来存储一些工具方法。 - 在
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. 使用方式
- 链接方式
// 引用 --->临时
<script type="text/javascript" src="http://xxx.com/sdk.js"></script>
// 使用
if (window.CheckuserSdk) {
window.CheckuserSdk.init({ cb: callback, key: 'customKey' });
}
- 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 作者：娜个小部呀
