update

src/assets/js/mixin.js

@@ -4,6 +4,7 @@
 import { getPubkey, getCaptchaCode, getVerifyCode, login, logout } from '@/api/account'
 import { setUserToken, removeAll } from '@/utils/auth'
 import { JSEncrypt } from 'jsencrypt'
+import Vue from "vue";
 
 export const userMixin = {
   data() {
@@ -170,6 +171,7 @@ export const userMixin = {
       }).then(() => {
         logout().then(res => {
           if (res.code === 0) {
+            Vue.$cookies.remove('token')
             this.$store.commit('USER_LOGOUT')
             removeAll()
           } else {

src/router/index.js

@@ -35,11 +35,19 @@ const routes = [
       {
         path: '/sso/login',
         meta: {
-          title: '账号登录？',
+          title: '验证码登录',
           needLogin: false,
         },
         component: () => import('@/views/sso/login'),
       },
+      {
+        path: '/sso/login1',
+        meta: {
+          title: '密码登录',
+          needLogin: false,
+        },
+        component: () => import('@/views/sso/login1'),
+      },
       {
         path: '/sso/register',
         meta: {

src/utils/auth.js

@@ -85,4 +85,5 @@ export function removeAll() {
   localStorage.removeItem(USER_ACCESS_TOKEN)
   localStorage.removeItem(USER_REFRESH_TOKEN)
   localStorage.removeItem(USER_INFO)
+  console.log('删除 localstorage')
 }

src/utils/request.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 import store from '@/store'
 import router from '@/router'
 import Vue from 'vue'
-import { getAccessToken, getRefreshToken, setUserToken } from '@/utils/auth'
+import {removeAll} from '@/utils/auth'
 
 const instance = axios.create({
   // 域名
@@ -94,7 +94,11 @@ instance.interceptors.response.use(
         case 401:
           // 返回401 清除token信息并跳转到登陆页面
           console.log('401 错误...')
-          // store.commit('delToken')
+          Vue.$cookies.remove('token')
+          store.commit('USER_LOGOUT')
+          store.commit('delToken')
+          removeAll()
+
           router.replace({
             path: '/sso/login',
             query: {

src/views/sso/login.vue

@@ -70,8 +70,8 @@
                 <el-link
                     type="primary"
                     :underline="false"
-                    @click="toLink('/sso/register')"
-                >没有账号？
+                    @click="toLink('/sso/login1')"
+                >密码登录
                 </el-link>
               </div>
             </el-form-item>
@@ -141,21 +141,6 @@ export default {
       smsLockObj: null
     }
   },
-  mounted() {
-    // 此页面是作为iframe嵌入的,在加载时,监听父页面发来的信息
-    window.addEventListener('message', function(event) {
-      let data = event.data
-      console.log('收到父级窗口消息', data)
-      //父页面(也就是子系统),点击退出时,移除统一登录中心域名下的token
-      if (data.type === 'logOut') {
-        Cookies.remove('token', {
-          Secure: true,
-          SameSite: 'None',
-          Domain: 'reghao.cn' //这个域名填写统一登录中心的一级域名
-        })
-      }
-    })
-  },
   created() {
     const token = Vue.$cookies.get('token')
     if (token !== null) {
@@ -165,12 +150,6 @@ export default {
       this.getPubkey()
       this.smsLockObj = new SmsLock('LOGIN_SMS', 60)
     }
-
-    /*const user = getUserInfo()
-    if (user !== null) {
-    } else {
-      this.$router.push('/')
-    }*/
   },
   destroyed() {
     this.smsLockObj.clearInterval()
@@ -241,11 +220,6 @@ export default {
               SameSite: 'None',
               Domain: 'reghao.cn' //这个域名填写统一登录中心的一级域名
             })
-
-            if (token) {
-              //向父窗口发送登录成功的消息
-              window.parent.postMessage({ type: 'loginSuccess' }, '*')
-            }
             this.$router.push('/')
           } else {
             this.$notify.info({

src/views/sso/login1.vue

@@ -0,0 +1,271 @@
+<template>
+  <div id="login-box">
+    <div class="header">登录</div>
+    <div class="main">
+      <el-form ref="form" :model="form" :rules="rules">
+        <el-form-item prop="username">
+          <el-input
+            v-model="form.username"
+            placeholder="用户名/邮箱/手机号"
+            class="cuborder-radius"
+            maxlength="11"
+            @keyup.enter.native="onSubmit('form')"
+          />
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+              v-model="form.password"
+              type="password"
+              placeholder="密码"
+              class="cuborder-radius"
+              @keyup.enter.native="onSubmit('form')"
+          />
+        </el-form-item>
+        <el-form-item prop="captchaCode">
+          <el-row>
+            <el-col :span=12>
+              <el-input
+                  v-model="form.captchaCode"
+                  placeholder="图形验证码"
+                  class="cuborder-radius"
+                  maxlength="11"
+                  @keyup.enter.native="onSubmit('form')"
+              />
+            </el-col>
+            <el-col :span=12>
+              <img :src="captchaCode" alt="图形验证码" title="点击刷新" style="cursor:pointer;" @click="getCaptcha">
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            class="submit-btn"
+            :loading="registerLoading"
+            @click="onSubmit('form')"
+          >
+            登录
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <div class="links">
+            <el-link
+              type="primary"
+              :underline="false"
+              @click="toLink('/sso/forget')"
+            >
+              找回密码
+            </el-link>
+            <el-link
+              type="primary"
+              :underline="false"
+              @click="toLink('/sso/register')"
+            >没有账号？
+            </el-link>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ServeCaptcha, ServeRegister, ServeSendVerifyCode } from '@/api/auth'
+import { isMobile } from '@/utils/validate'
+import SmsLock from '@/utils/sms-lock'
+
+export default {
+  data() {
+    let validateMobile = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('手机号不能为空！'))
+        return
+      }
+
+      if (!isMobile(value)) {
+        callback(new Error('手机号格式不正确！'))
+      } else {
+        callback()
+      }
+    }
+
+    let validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== this.form.password) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      captchaCode: '',
+      registerLoading: false,
+      form: {
+        username: '',
+        password: '',
+        mobile: '',
+        smsCode: '',
+        captchaCode: '',
+        plat: ''
+      },
+      rules: {
+        username: [
+          {
+            required: true,
+            message: '用户名不能为空!',
+            trigger: 'blur',
+          },
+        ],
+        mobile: [
+          {
+            validator: validateMobile,
+            trigger: 'blur',
+          },
+        ],
+        smsCode: [
+          {
+            required: true,
+            message: '短信验证码不能为空!',
+            trigger: 'blur',
+          },
+        ],
+      },
+      smsLock: false,
+      smsLockObj: null,
+    }
+  },
+  created() {
+    this.getCaptcha()
+    this.smsLockObj = new SmsLock('REGISTER_SMS', 60)
+  },
+  destroyed() {
+    this.smsLockObj.clearInterval()
+  },
+  methods: {
+    getCaptcha() {
+      ServeCaptcha().then(res => {
+        if (res.code === 0) {
+          this.captchaCode = res.data
+        } else {
+          this.$notify.info({
+            title: '提示',
+            message: '获取 Captcha 失败, 请重新刷新页面...',
+          })
+        }
+      }).finally(() => {
+      })
+    },
+    randomString(len) {
+      len = len || 16
+      var t = '012345678ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'
+      var a = t.length
+      var res = ''
+      for (var i = 0; i < len; i++) res += t.charAt(Math.floor(Math.random() * a))
+      return res
+    },
+    resetFields() {
+      if (!this.model) {
+        console.warn('[Element Warn][Form]model is required for resetFields to work.');
+        return;
+      }
+      this.fields.forEach(field => {
+        field.resetField();
+      });
+    },
+    toLink(url) {
+      this.$router.push({
+        path: url,
+      })
+    },
+
+    onSubmit(formName) {
+      if (this.registerLoading) return false
+
+      this.$refs[formName].validate(valid => {
+        if (!valid) return false
+        this.registerLoading = true
+        this.register()
+      })
+    },
+    register() {
+      ServeRegister(
+          this.form
+      ).then(res => {
+          if (res.code === 0) {
+            this.$notify({
+              title: '成功',
+              message: '注册成功,快去登录吧...',
+              type: 'success',
+            })
+
+            this.$refs.form.resetFields()
+            setTimeout(() => {
+              this.toLink('/sso/login')
+            }, 1500)
+          } else {
+            this.$notify.info({
+              title: '提示',
+              message: res.message,
+            })
+          }
+        }).catch((e) => {
+          console.log(e)
+          this.$notify({
+            message: '网络错误,请稍后再试...',
+          })
+        }).finally(() => {
+          this.registerLoading = false
+        })
+    },
+    // 点击发送验证码
+    sendSms() {
+      if (this.smsLock) return false
+
+      if (!isMobile(this.form.mobile)) {
+        this.$refs.form.validateField('mobile', (val) => {
+          return !val;
+        })
+      }
+
+      this.smsLock = true
+      ServeSendVerifyCode({
+        receiver: this.form.mobile,
+        channel: 'register',
+      }).then(res => {
+          if (res.code === 0) {
+            this.$notify({
+              title: '成功',
+              message: '验证码发送成功...',
+              type: 'success',
+            })
+
+            this.smsLockObj.start()
+            /*if (res.data.is_debug) {
+              setTimeout(() => {
+                this.$notify({
+                  title: '提示',
+                  message: '已自动填充验证码',
+                })
+
+                this.form.sms_code = res.data.sms_code
+              }, 500)
+            }*/
+          } else {
+            this.$notify({
+              title: '提示',
+              message: res.message,
+              customClass: 'cus-notifyclass',
+            })
+          }
+        }).finally(() => {
+          this.smsLock = false
+        })
+    },
+  },
+}
+</script>
+<style lang="scss">
+@import '~@/assets/css/login-auth.scss';
+</style>