增加动态演示图

sa-token-doc/doc/lib/docsify-plugin.js

@@ -81,6 +81,20 @@ var myDocsifyPlugin = function(hook, vm) {
 			// $('.search input').val('');
 			$('.results-panel').removeClass('show');
 		});
+		
+		// 点击按钮，加载图片
+		$(document).on('click', '.show-img', function(){
+			var src = $(this).attr('img-src');
+			var img = '<img class="show-to-img" src="' + src + '" />';
+			$(this).after(img);
+			$(this).remove();
+		})
+		
+		// 点击按钮，加载图片
+		$(document).on('click', '.show-to-img', function(){
+			open(this.src);
+		})
+		
 	});
 	
 }

sa-token-doc/doc/lib/index.css

@@ -204,7 +204,20 @@ body {
 #main .toc-box a{border-color: rgba(0,0,0,0); transition: 0s;}
 #main .toc-box a span{color: inherit;}
 
-
+/* 加载图片的按钮 */
+.show-img{
+	background-color: #FFF;
+	padding: 8px 15px;
+	border: 1px #42b983 solid;
+	color: #42b983;
+	cursor: pointer;
+	border-radius: 2px;
+	transition: all 0.2s;
+}
+.show-img:hover{
+	background-color: #eaf6eb;
+}
+.show-to-img{cursor: pointer;}
 
 /* 导航栏悬浮时出现下滑条条 */
 /* .doc-header .nav-right .wzi::after {

sa-token-doc/doc/micro/dcs-session.md

@@ -28,6 +28,12 @@
 
 由于`jwt`模式不在服务端存储数据，对于比较复杂的业务可能会功能受限，因此更加推荐使用方案三
 
+
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--dcs-session.gif">加载动态演示图</button>
+
+
+集成依赖示例：
+
 ``` xml
 <!-- Sa-Token 整合 Redis (使用jackson序列化方式) -->
 <dependency>
@@ -40,6 +46,7 @@
     <artifactId>commons-pool2</artifactId>
 </dependency>
 ```
+
 详细参考：[集成 Redis](/up/integ-redis)
 
 

sa-token-doc/doc/plugin/alone-redis.md

@@ -5,6 +5,10 @@ Sa-Token默认的Redis集成方式会把权限数据和业务缓存放在一起
 
 > 搭建两个Redis服务器，一个专门用来做业务缓存，另一台专门存放Sa-Token权限数据 
 
+
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--alone-redis.gif">加载动态演示图</button>
+
+
 要将Sa-Token的数据单独抽离出来很简单，你只需要为Sa-Token单独配置一个Redis连接信息即可 
 
 --- 

sa-token-doc/doc/sso/sso-type1.md

@@ -18,6 +18,10 @@
 
 而共享Redis，并不需要我们把所有项目的数据都放在同一个Redis中，Sa-Token提供了 **[权限缓存与业务缓存分离]** 的解决方案，详情戳：[Alone独立Redis插件](/plugin/alone-redis)。
 
+
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--sso1.gif">加载动态演示图</button>
+
+
 OK，所有理论就绪，下面开始实战：
 
 

sa-token-doc/doc/sso/sso-type2.md

@@ -28,6 +28,10 @@
 整个过程，除了第四步用户在SSO认证中心登录时会被打断，其余过程均是自动化的，当用户在另一个子系统再次点击`[登录]`按钮，由于此用户在SSO认证中心已有会话存在，
 所以第四步也将自动化，也就是单点登录的最终目的 —— 一次登录，处处通行。
 
+
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--sso2.gif">加载动态演示图</button>
+
+
 下面我们按照步骤依次完成上述过程：
 
 ### 2、准备工作 

sa-token-doc/doc/sso/sso-type3.md

@@ -131,6 +131,10 @@ public Object myinfo() {
 5. Server 端注销下线。
 6. 单点注销完成。
 
+
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--sso3-logout.gif">加载动态演示图</button>
+
+
 这些逻辑 Sa-Token 内部已经封装完毕，你只需按照文档增加以下配置即可：
 
 #### 4.1、SSO-Client 端新增配置 

sa-token-doc/doc/up/mutex-login.md

@@ -3,6 +3,9 @@
 如果你经常使用腾讯QQ，就会发现它的登录有如下特点：它可以手机电脑同时在线，但是不能在两个手机上同时登录一个账号 <br/>
 同端互斥登录，指的就是像腾讯QQ一样，在同一类型设备上只允许单地点登录，在不同类型设备上允许同时在线
 
+
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--mutex-login.gif">加载动态演示图</button>
+
 --- 
 
 ## 具体API

sa-token-doc/doc/up/remember-me.md

@@ -23,13 +23,16 @@ StpUtil.login(10001, false);
 ### 实现原理
 Cookie作为浏览器提供的默认会话跟踪机制，其生命周期有两种形式，分别是：
 - 临时Cookie：有效期为本次会话，只要关闭浏览器窗口，Cookie就会消失
-- 永久Cookie：有效期为一个具体的时间，在时间未到期之前，即使用户关闭了浏览器Cookie也不会消失
+- 持久Cookie：有效期为一个具体的时间，在时间未到期之前，即使用户关闭了浏览器Cookie也不会消失
 
 利用Cookie的此特性，我们便可以轻松实现 [记住我] 模式：
-- 勾选 [记住我] 按钮时：调用`StpUtil.login(10001, true)`，在浏览器写入一个`永久Cookie`储存 Token，此时用户即使重启浏览器 Token 依然有效
+- 勾选 [记住我] 按钮时：调用`StpUtil.login(10001, true)`，在浏览器写入一个`持久Cookie`储存 Token，此时用户即使重启浏览器 Token 依然有效
 - 不勾选 [记住我] 按钮时：调用`StpUtil.login(10001, false)`，在浏览器写入一个`临时Cookie`储存 Token，此时用户在重启浏览器后 Token 便会消失，导致会话失效
 
 
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--remember-me.gif">加载动态演示图</button>
+
+
 ### 前后台分离模式下如何实现[记住我]?
 
 此时机智的你😏很快发现一个问题，Cookie虽好，却无法在前后端分离环境下使用，那是不是代表上述方案在APP、小程序等环境中无效？
@@ -39,7 +42,7 @@ Cookie作为浏览器提供的默认会话跟踪机制，其生命周期有两
 
 以经典跨端框架 [uni-app](https://uniapp.dcloud.io/) 为例，我们可以使用如下方式达到同样的效果：
 ``` js
-// 使用本地存储保存token，达到 [永久Cookie] 的效果
+// 使用本地存储保存token，达到 [持久Cookie] 的效果
 uni.setStorageSync("satoken", "xxxx-xxxx-xxxx-xxxx-xxx");
 
 // 使用globalData保存token，达到 [临时Cookie] 的效果
@@ -48,7 +51,7 @@ getApp().globalData.satoken = "xxxx-xxxx-xxxx-xxxx-xxx";
 
 如果你决定在PC浏览器环境下进行前后台分离模式开发，那么更加简单：
 ``` js
-// 使用 localStorage 保存token，达到 [永久Cookie] 的效果
+// 使用 localStorage 保存token，达到 [持久Cookie] 的效果
 localStorage.setItem("satoken", "xxxx-xxxx-xxxx-xxxx-xxx");
 
 // 使用 sessionStorage 保存token，达到 [临时Cookie] 的效果

sa-token-doc/doc/use/jur-auth.md

@@ -10,6 +10,10 @@
 再往底了说，就是每个账号都会拥有一个权限码集合，我来校验这个集合中是否包含指定的权限码 <br/>
 例如：当前账号拥有权限码集合：`["user-add", "user-delete", "user-get"]`，这时候我来校验权限 `"user-update"`，则其结果就是：**验证失败，禁止访问** <br/>
 
+
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--jur-auth.gif">加载动态演示图</button>
+
+
 所以现在问题的核心就是: 
 1. 如何获取一个账号所拥有的的权限码集合
 2. 本次操作需要验证的权限码是哪个 

sa-token-doc/doc/use/kick.md

@@ -26,6 +26,8 @@ StpUtil.kickoutByTokenValue("token");      // 将指定 Token 踢下线
 - 踢人下线不会清除Token信息，而是将其打上特定标记，再次访问会提示：Token已被踢下线。
 
 
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--kickout.gif">加载动态演示图</button>
+
 
 ### 3、账号封禁
 对于违规账号，有时候我们仅仅将其踢下线还是远远不够的，我们还需要对其进行**账号封禁**防止其再次登录

sa-token-doc/doc/use/login-auth.md

@@ -8,6 +8,9 @@
 那么如何判断一个会话是否登录？框架会在登录成功后给你做个标记，每次登录认证时校验这个标记，有标记者视为已登录，无标记者视为未登录！
 
 
+<button class="show-img" img-src="https://oss.dev33.cn/sa-token/doc/g/g3--login-auth.gif">加载动态演示图</button>
+
+
 ### 登录与注销
 根据以上思路，我们很容易想到以下api：