:recycle: 重构代码。 解决社交登录重复登录路由不转发及其调整404 问题 fix #7

src/page/login/authredirect.vue

@@ -31,7 +31,7 @@ export default {
       })
     } else {
       window.close()
-      window.opener.location.href = `${window.location.origin}/#/login?state=${state}&code=${code}`
+      window.opener.location.href = `${window.location.origin}/#/login?state=${state}&code=${code}&time=`+new Date().getTime()
     }
   }
 }

src/page/login/index.vue

@@ -48,11 +48,12 @@
   import userLogin from "./userlogin";
   import codeLogin from "./codelogin";
   import thirdLogin from "./thirdlogin";
-  import { mapGetters } from "vuex";
-  import { setStore, getStore } from "@/util/store";
-  import { dateFormat } from "@/util/date";
-  import { validatenull } from "@/util/validate";
+  import {mapGetters} from "vuex";
+  import {getStore, setStore} from "@/util/store";
+  import {dateFormat} from "@/util/date";
+  import {validatenull} from "@/util/validate";
   import topColor from "@/page/index/top/top-color";
+
   export default {
     name: "login",
     components: {
@@ -65,43 +66,51 @@
       return {
         time: "",
         active: "",
-        activeName: "user"
+        activeName: "user",
+        socialForm: {}
       };
     },
     watch: {
-      $route() {
-        const params = this.$route.query;
-        this.socialForm.state = params.state;
-        this.socialForm.code = params.code;
-        if (!validatenull(this.socialForm.state)) {
+      $route: {
+        handler() {
+          const params = this.$route.query
+          if (validatenull(params.state) && validatenull(params.code)) return
+
+          this.socialForm.state = params.state
+          this.socialForm.code = params.code
           const loading = this.$loading({
             lock: true,
-            text: `${
-              this.socialForm.state === "WX" ? "微信" : "QQ"
-              }登录中,请稍后。。。`,
-            spinner: "el-icon-loading"
-          });
-          setTimeout(() => {
-            loading.close();
-          }, 2000);
-        }
+            text: `登录中,请稍后。。。`,
+            spinner: 'el-icon-loading'
+          })
+          this.$store.dispatch('LoginBySocial', this.socialForm).then(
+            () => {
+              loading.close()
+              this.$router.push({path: this.tagWel.value});
+            }).catch(() => {
+            loading.close()
+          })
+
+        },
+        immediate: true
       }
     },
     created() {
-      this.active = getStore({ name: "tenantId" });
+      this.active = getStore({name: "tenantId"});
       this.getTime();
       setInterval(() => {
         this.getTime();
       }, 1000);
     },
-    mounted() {},
+    mounted() {
+    },
     computed: {
-      ...mapGetters(["website"])
+      ...mapGetters(["website",'tagWel'])
     },
     props: [],
     methods: {
       handleCommand(command) {
-        setStore({ name: "tenantId", content: command });
+        setStore({name: "tenantId", content: command});
       },
       getTime() {
         this.time = dateFormat(new Date());
@@ -118,10 +127,10 @@
     width: 100%;
     height: 100%;
     margin: 0 auto;
-    background: url("http://www.17sucai.com/preview/242158/2015-01-10/%E7%99%BB%E5%BD%95/images/cloud.jpg")
-    0 bottom repeat-x #049ec4;
+    background: url("http://www.17sucai.com/preview/242158/2015-01-10/%E7%99%BB%E5%BD%95/images/cloud.jpg") 0 bottom repeat-x #049ec4;
     animation: animate-cloud 20s linear infinite;
   }
+
   .login-weaper {
     margin: 0 auto;
     width: 1000px;
@@ -135,6 +144,7 @@
     align-items: center;
     display: flex;
   }
+
   .login-left {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
@@ -146,9 +156,11 @@
     width: 50%;
     position: relative;
   }
+
   .login-left .img {
     width: 140px;
   }
+
   .login-time {
     position: absolute;
     left: 25px;
@@ -160,6 +172,7 @@
     font-size: 18px;
     overflow: hidden;
   }
+
   .login-left .title {
     margin-top: 60px;
     text-align: center;
@@ -179,17 +192,21 @@
     float: left;
     box-sizing: border-box;
   }
+
   .login-main {
     margin: 0 auto;
     width: 65%;
     box-sizing: border-box;
   }
+
   .login-main > h3 {
     margin-bottom: 20px;
   }
+
   .login-main > p {
     color: #76838f;
   }
+
   .login-title {
     color: #333;
     margin-bottom: 40px;
@@ -198,6 +215,7 @@
     text-align: center;
     letter-spacing: 4px;
   }
+
   .login-select {
     input {
       color: #333;
@@ -207,16 +225,19 @@
       text-align: center;
     }
   }
+
   .login-menu {
     margin-top: 40px;
     width: 100%;
     text-align: center;
+
     a {
       color: #999;
       font-size: 12px;
       margin: 0px 8px;
     }
   }
+
   .login-submit {
     width: 100%;
     height: 45px;
@@ -231,17 +252,22 @@
     font-family: "neo";
     transition: 0.25s;
   }
+
   .login-form {
     margin: 10px 0;
+
     i {
       color: #333;
     }
+
     .el-form-item__content {
       width: 100%;
     }
+
     .el-form-item {
       margin-bottom: 12px;
     }
+
     .el-input {
       input {
         padding-bottom: 10px;
@@ -252,6 +278,7 @@
         color: #333;
         border-bottom: 1px solid rgb(235, 237, 242);
       }
+
       .el-input__prefix {
         i {
           padding: 0 5px;
@@ -260,12 +287,14 @@
       }
     }
   }
+
   .login-code {
     display: flex;
     align-items: center;
     justify-content: space-around;
     margin: 0 0 0 10px;
   }
+
   .login-code-img {
     margin-top: 2px;
     width: 100px;

src/page/login/userlogin.vue

@@ -61,112 +61,90 @@
       <el-button type="primary"
                  size="small"
                  @click.native.prevent="handleLogin"
-                 class="login-submit">登录</el-button>
+                 class="login-submit">登录
+      </el-button>
     </el-form-item>
   </el-form>
 </template>
 
 <script>
-import { randomLenNum } from "@/util/util";
-import { mapGetters } from "vuex";
-export default {
-  name: "userlogin",
-  data () {
+  import {randomLenNum} from "@/util/util";
+  import {mapGetters} from "vuex";
 
-    return {
-      socialForm: {
+  export default {
+    name: "userlogin",
+    data() {
+
+      return {
+        socialForm: {
           code: '',
           state: ''
-      },
-      loginForm: {
-        username: "admin",
-        password: "123456",
-        code: "",
-        redomStr: ""
-      },
-      checked: false,
-      code: {
-        src: "/code",
-        value: "",
-        len: 4,
-        type: "image"
-      },
-      loginRules: {
-        username: [
-          { required: true, message: "请输入用户名", trigger: "blur" }
-        ],
-        password: [
-          { required: true, message: "请输入密码", trigger: "blur" },
-          { min: 6, message: "密码长度最少为6位", trigger: "blur" }
-        ],
-        code: [
-          { required: true, message: "请输入验证码", trigger: "blur" },
-          { min: 4, max: 4, message: "验证码长度为4位", trigger: "blur" }
-        ]
-      },
-      passwordType: "password"
-    };
-  },
-  watch: {
-        $route() {
-            const params = this.$route.query
-            this.socialForm.state = params.state
-            this.socialForm.code = params.code
-            if (!validatenull(this.socialForm.state)) {
-                const loading = this.$loading({
-                    lock: true,
-                    text: `登录中,请稍后。。。`,
-                    spinner: 'el-icon-loading'
-                })
-                setTimeout(() => {
-                    loading.close()
-                }, 2000)
-                this.handleSocialLogin()
-            }
-        }
+        },
+        loginForm: {
+          username: "admin",
+          password: "123456",
+          code: "",
+          redomStr: ""
+        },
+        checked: false,
+        code: {
+          src: "/code",
+          value: "",
+          len: 4,
+          type: "image"
+        },
+        loginRules: {
+          username: [
+            {required: true, message: "请输入用户名", trigger: "blur"}
+          ],
+          password: [
+            {required: true, message: "请输入密码", trigger: "blur"},
+            {min: 6, message: "密码长度最少为6位", trigger: "blur"}
+          ],
+          code: [
+            {required: true, message: "请输入验证码", trigger: "blur"},
+            {min: 4, max: 4, message: "验证码长度为4位", trigger: "blur"}
+          ]
+        },
+        passwordType: "password"
+      };
     },
-  created () {
-    this.refreshCode();
-  },
-  mounted () { },
-  computed: {
-    ...mapGetters(["tagWel"])
-  },
-  props: [],
-  methods: {
-    refreshCode () {
-      this.loginForm.code = ''
-      this.loginForm.randomStr = randomLenNum(this.code.len, true)
-      this.code.type === 'text'
-        ? (this.code.value = randomLenNum(this.code.len))
-        : (this.code.src = `${this.codeUrl}?randomStr=${this.loginForm.randomStr}`)
+    created() {
+      this.refreshCode();
     },
-    showPassword () {
-      this.passwordType == ''
-        ? (this.passwordType = 'password')
-        : (this.passwordType = '')
+    mounted() {
     },
-    handleSocialLogin () {
-      this.$store.dispatch('LoginBySocial', this.socialForm).then(
-        () => {
-          this.$router.push({ path: this.tagWel.value });
-        }
-      )
+    computed: {
+      ...mapGetters(["tagWel"])
     },
-    handleLogin () {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
-            this.$router.push({ path: this.tagWel.value });
-          }).catch(()=>{
-            this.refreshCode()
-          })
+    props: [],
+    methods: {
+      refreshCode() {
+        this.loginForm.code = ''
+        this.loginForm.randomStr = randomLenNum(this.code.len, true)
+        this.code.type === 'text'
+          ? (this.code.value = randomLenNum(this.code.len))
+          : (this.code.src = `${this.codeUrl}?randomStr=${this.loginForm.randomStr}`)
+      },
+      showPassword() {
+        this.passwordType == ''
+          ? (this.passwordType = 'password')
+          : (this.passwordType = '')
+      },
+      handleLogin() {
+        this.$refs.loginForm.validate(valid => {
+          if (valid) {
+            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
+              this.$router.push({path: this.tagWel.value});
+            }).catch(() => {
+              this.refreshCode()
+            })
 
-        }
-      });
+          }
+        });
+      }
     }
-  }
-};
+  };
 </script>
 
 <style>

src/router/page/index.js

@@ -75,5 +75,16 @@ export default [{
     {
       path: '*',
       redirect: '/404',
-    }
+    },
+    {
+      path: '/authredirect',
+      name: '授权页',
+      component: () =>
+      import ( /* webpackChunkName: "page" */ '@/page/login/authredirect'),
+      meta: {
+        keepAlive: true,
+        isTab: false,
+        isAuth: false
+      }
+    },
 ]

vue.config.js

@@ -21,6 +21,7 @@ module.exports = {
   },
   // 配置转发代理
   devServer: {
+    disableHostCheck: true,
     proxy: {
       '/auth': {
         target: url,