!272 增加“基于授权码模式，实现 SSO 单点登录“示例

Merge pull request !272 from 芋道源码/feature/sso-example

Author: YunaiV

src/permission.js

@@ -48,7 +48,8 @@ router.beforeEach((to, from, next) => {
       // 在免登录白名单，直接进入
       next()
     } else {
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+      const redirect = encodeURIComponent(to.fullPath) // 编码 URI，保证参数跳转回去后，可以继续带上
+      next(`/login?redirect=${redirect}`) // 否则全部重定向到登录页
       NProgress.done()
     }
   }

src/views/login.vue

@@ -190,7 +190,7 @@ export default {
     // 验证码开关
     this.captchaEnable = getCaptchaEnable();
     // 重定向地址
-    this.redirect = this.$route.query.redirect;
+    this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined;
     this.getCookie();
   },
   methods: {

src/views/socialLogin.vue

@@ -117,7 +117,7 @@ export default {
     // 验证码开关
     this.captchaEnable = getCaptchaEnable();
     // 重定向地址
-    this.redirect = this.$route.query.redirect;
+    this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined;
     // 社交登录相关
     this.type = this.$route.query.type;
     this.code = this.$route.query.code;

src/views/sso.vue

@@ -19,12 +19,7 @@
             </el-tab-pane>
           </el-tabs>
           <div>
-            <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
-              <el-form-item prop="tenantName" v-if="tenantEnable">
-                <el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
-                  <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon"/>
-                </el-input>
-              </el-form-item>
+            <el-form ref="loginForm" :model="loginForm" class="login-form">
               <!-- 授权范围的选择 -->
               此第三方应用请求获得以下权限：
               <el-form-item prop="scopes">
@@ -56,18 +51,14 @@
 </template>
 
 <script>
-import {getTenantIdByName} from "@/api/system/tenant";
-import {getTenantEnable} from "@/utils/ruoyi";
 import {authorize, getAuthorize} from "@/api/login";
-import {getTenantName, setTenantId} from "@/utils/auth";
 
 export default {
   name: "Login",
   data() {
     return {
       tenantEnable: true,
       loginForm: {
-        tenantName: "芋道源码",
         scopes: [], // 已选中的 scope 数组
       },
       params: { // URL 上的 client_id、scope 等参数
@@ -81,35 +72,10 @@ export default {
         name: '',
         logo: '',
       },
-      LoginRules: {
-        tenantName: [
-          {required: true, trigger: "blur", message: "租户不能为空"},
-          {
-            validator: (rule, value, callback) => {
-              // debugger
-              getTenantIdByName(value).then(res => {
-                const tenantId = res.data;
-                if (tenantId && tenantId >= 0) {
-                  // 设置租户
-                  setTenantId(tenantId)
-                  callback();
-                } else {
-                  callback('租户不存在');
-                }
-              });
-            },
-            trigger: 'blur'
-          }
-        ]
-      },
       loading: false
     };
   },
   created() {
-    // 租户开关
-    this.tenantEnable = getTenantEnable();
-    this.getCookie();
-
     // 解析参数
     // 例如说【自动授权不通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read%20user.write
     // 例如说【自动授权通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read
@@ -162,13 +128,6 @@ export default {
     })
   },
   methods: {
-    getCookie() {
-      const tenantName = getTenantName();
-      this.loginForm = {
-        ...this.loginForm,
-        tenantName: tenantName ? tenantName : this.loginForm.tenantName,
-      };
-    },
     handleAuthorize(approved) {
       this.$refs.loginForm.validate(valid => {
         if (!valid) {