feat: 增加登录事件默认回调

multiojuice4 · May 10, 2020 · 08e7ed8 · 08e7ed8
1 parent 8a05870
commit 08e7ed8
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 21 deletions.
diff --git a/src/main.js b/src/main.js
@@ -19,6 +19,31 @@ Vue.directive("focus", {
   }
 });
 // Vue.config.devtools = true
+
+// 检查登录成功后的状态
+const onAuthenticated = userinfo => {
+  if (userinfo.signedUp === userinfo.lastLogin) {
+    // 初次登录
+    // 检查是否手机号注册
+    if (userinfo.registerMethod !== "phone:message") {
+      if (location.host === "localhost") {
+        location.href = "http://localhost:3000/bind-phone";
+      } else {
+        location.href = "https//authing.co/bind-phone";
+      }
+    }
+  } else {
+    // 老用户，需要检查是否绑定了手机号
+    if (!userinfo.phone) {
+      if (location.host === "localhost") {
+        location.href = "http://localhost:3000/bind-phone";
+      } else {
+        location.href = "https//authing.co/bind-phone";
+      }
+    }
+  }
+};
+
 var AuthingGuard = function(clientId, opts) {
   window.Authing = Authing;
 
@@ -84,16 +109,18 @@ var AuthingGuard = function(clientId, opts) {
   $authing.opts.forceLogin = opts.forceLogin || false;
   $authing.opts.title = opts.title || null;
   $authing.opts.logo = opts.logo || null;
-  $authing.opts.defaultLoginMethod = opts.defaultLoginMethod || "PASSWORD"
-  opts.defaultLoginMethod = opts.defaultLoginMethod || "PASSWORD"
+  $authing.opts.defaultLoginMethod = opts.defaultLoginMethod || "PASSWORD";
+  opts.defaultLoginMethod = opts.defaultLoginMethod || "PASSWORD";
 
   // this.initLinks($authing.opts.SSOHost);
-  $authing.opts.passwordEncPublicKey = opts.passwordEncPublicKey || `-----BEGIN PUBLIC KEY-----
+  $authing.opts.passwordEncPublicKey =
+    opts.passwordEncPublicKey ||
+    `-----BEGIN PUBLIC KEY-----
   MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4xKeUgQ+Aoz7TLfAfs9+paePb
   5KIofVthEopwrXFkp8OCeocaTHt9ICjTT2QeJh6cZaDaArfZ873GPUn00eOIZ7Ae
   +TiA2BKHbCvloW3w5Lnqm70iSsUi5Fmu9/2+68GZRH9L7Mlh8cFksCicW2Y2W2uM
   GKl64GDcIq3au+aqJQIDAQAB
-  -----END PUBLIC KEY-----`
+  -----END PUBLIC KEY-----`;
 
   $authing.opts.mountId = opts.mountId || null;
   // 初始化小程序扫码登录配置
@@ -187,6 +214,11 @@ var AuthingGuard = function(clientId, opts) {
       opts: opts
     }
   });
+
+  // 添加事件回调
+  if (opts.appId === "5e3ce9dadf5382920a69a76a") {
+    this.on("authenticated", onAuthenticated);
+  }
 };
 
 AuthingGuard.prototype = {

diff --git a/src/views/login/PhoneLogin.vue b/src/views/login/PhoneLogin.vue
@@ -1,5 +1,19 @@
 <template>
   <div>
+    <SocialButtonsList
+      v-if="!socialButtonsListLoading && socialButtonsList.length > 0"
+    />
+
+    <P
+      class="_authing_form-tip"
+      v-show="
+        !socialButtonsListLoading &&
+        socialButtonsList.length > 0 &&
+        !opts.hideUP
+      "
+      >或者</P
+    >
+
     <form
       class="form-body"
       @submit.prevent="
@@ -8,11 +22,8 @@
         }
       "
     >
-      <div style="margin-bottom:16px" class="authing-form no-shadow">
-         <div
-          class="__authing_force_login_tips"
-          style="text-align:center"
-        >
+      <div style="margin-bottom: 16px;" class="authing-form no-shadow">
+        <div class="__authing_force_login_tips" style="text-align: center;">
           <p>使用手机号验证码登录</p>
           <p>如果您没有帐号，我们会自动创建</p>
         </div>
@@ -29,7 +40,7 @@
         </div>
         <div
           class="_authing_form-group"
-          style="display:flex; align-items: flex-end;"
+          style="display: flex; align-items: flex-end;"
           v-if="this.loginMethod == 'code'"
         >
           <input
@@ -44,7 +55,12 @@
           <div class="phone-code-wrapper" style="flex-basis: 50%;">
             <button
               @click="handleSendingPhoneCode"
-              style="height: 40px;font-size: 12px;border-radius: 0px;border:none;"
+              style="
+                height: 40px;
+                font-size: 12px;
+                border-radius: 0px;
+                border: none;
+              "
               class="btn btn-primary"
               :class="{ 'btn-ban': countDown !== 0 }"
             >
@@ -64,7 +80,7 @@
           />
         </div>
         <div class="row" v-if="this.needNextStep">
-          <div class="_authing_form-group" style="margin-bottom:0px;">
+          <div class="_authing_form-group" style="margin-bottom: 0px;">
             <label
               class="_authing_label"
               for="login-remember"
@@ -76,7 +92,7 @@
               >
             </label>
           </div>
-          <div class="_authing_form-group" style="margin-bottom:0px;">
+          <div class="_authing_form-group" style="margin-bottom: 0px;">
             <label
               class="_authing_label"
               for="login-remember"
@@ -89,8 +105,18 @@
             </label>
           </div>
         </div>
+        <div class="_authing_form-group" style="margin-bottom: 0;">
+          <label
+            class="_authing_label"
+            for="login-remember"
+            style="width: 100%;"
+          >
+            <a class="_authing_a" @click="gotoLogin">使用邮箱登录</a>
+          </label>
+        </div>
       </div>
     </form>
+
     <div
       class="_authing_form-footer login"
       v-show="!opts.hideUP && !this.needNextStep"
@@ -110,8 +136,12 @@
   </div>
 </template>
 <script>
+import SocialButtonsList from "./SocialButtonsList";
 import { mapActions, mapGetters } from "vuex";
 export default {
+  components: {
+    SocialButtonsList
+  },
   data() {
     return {
       countDown: 0,
@@ -128,9 +158,14 @@ export default {
   },
   computed: {
     ...mapGetters("loading", {
+      socialButtonsListLoading: "socialButtonsList",
       formLoading: "form"
     }),
-    ...mapGetters("data", ["signUpPhone", "signUpPassword"])
+    ...mapGetters("data", [
+      "socialButtonsList",
+      "signUpPhone",
+      "signUpPassword"
+    ])
   },
   mounted() {
     this.phone = this.signUpPhone || "";
@@ -168,16 +203,16 @@ export default {
         this.removeRedLine("login-phone");
       }
 
-      if (!this.opts.hidePhonePassword){
+      if (!this.opts.hidePhonePassword) {
         this.showGlobalMessage({
           type: "info",
           message: "请选择登录方式"
         });
         this.needNextStep = true;
       } else {
         // 隐藏了手机号密码登录
-        this.needNextStep = true
-        this.handleChoosePhoneCodeLogin()
+        this.needNextStep = true;
+        this.handleChoosePhoneCodeLogin();
       }
     },
     handleLogin() {
@@ -343,10 +378,10 @@ export default {
           });
         });
     },
-    handleChoosePhoneCodeLogin(){
-      this.loginMethod = 'code'
-      this.handleSendingPhoneCode()
-      this.hideGlobalMessage()
+    handleChoosePhoneCodeLogin() {
+      this.loginMethod = "code";
+      this.handleSendingPhoneCode();
+      this.hideGlobalMessage();
     }
   }
 };