帐号登录重构

src/api/account.js

@@ -4,13 +4,15 @@ const accountApi = {
   checkUsernameApi: '/api/user/account/check/username',
   selectUsernameApi: '/api/user/account/select/username',
   checkEmailApi: '/api/user/account/check/email',
-  verifyCodeApi: '/api/account/code/verify',
-  captchaCodeApi: '/api/account/code/captcha',
+
+  verifyCodeApi: '/api/auth/code/verify',
+  captchaCodeApi: '/api/auth/code/captcha',
+  pubkeyApi: '/api/auth/code/pubkey',
+
   registerApi: '/api/account/user/register',
   resetPasswordApi: '/api/account/user/reset',
-  pubkeyApi: '/api/account/code/pubkey',
-  loginApi: '/api/account/auth/signin',
-  logoutApi: '/api/account/auth/signout'
+  loginApi: '/api/auth/signin',
+  logoutApi: '/api/auth/signout'
 }
 
 export function getBase64Captcha(captchaUrl) {
@@ -61,58 +63,3 @@ export function login(loginData) {
 export function logout() {
   return get(accountApi.logoutApi)
 }
-
-
-// 登录服务接口
-export const ServePubkey = () => {
-  return get('/api/account/code/pubkey')
-}
-
-// 登录服务接口
-export const ServeLogin = data => {
-  return post('/api/account/auth/signin', data)
-}
-
-// 登录注销
-export const ServeLogout = () => {
-  return post('/api/account/auth/signout')
-}
-
-// 注册服务接口
-export const ServeRegister = data => {
-  return post('/api/account/registry/create', data)
-}
-
-// 发送找回密码验证码
-export const ServeSendVerifyCode = data => {
-  return post('/api/account/code/verify', data)
-}
-
-// 发送邮箱验证码服务接口
-export const ServeRegistryCheck = data => {
-  return post('/api/account/registry/check', data)
-}
-
-export const ServeCaptcha = () => {
-  return get('/api/account/code/captcha')
-}
-
-// 刷新登录Token服务接口
-export const ServeRefreshToken = (data) => {
-  return post('/api/account/token/refresh', data)
-}
-
-// 重置密码服务
-export const ServeForgetPassword = data => {
-  return post('/api/account/password/reset', data)
-}
-
-// 获取登录记录
-export const ServeLoginRecord = () => {
-  return get('/api/account/login/record')
-}
-
-// 注销某次登录
-export const ServeLoginDeactive = (loginId) => {
-  return post('/api/account/login/deactive/' + loginId)
-}

src/components/layout/NavBar.vue

@@ -126,6 +126,50 @@
         </li>
       </ul>
     </el-col>
+
+    <!--登录弹窗-->
+    <el-dialog
+      title="用户登录"
+      append-to-body
+      :visible.sync="dialogVisible"
+      width="30%"
+      center
+    >
+      <el-form ref="form" :model="userLogin">
+        <el-form-item label="帐号">
+          <el-input
+            v-model="userLogin.username"
+            placeholder="请输入手机号或邮箱"
+            style="width: 70%; padding-right: 2px"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input
+            v-model="userLogin.password"
+            placeholder="请输入验证码"
+            style="width: 45%; padding-right: 2px"
+          />
+          <el-button :disabled="isBtn" @click="fetchVerifyCode">{{ code }}</el-button>
+        </el-form-item>
+        <el-form-item label="图形验证码" label-width="90px">
+          <el-image :src="captchaCode" @click="getCaptcha" />
+          <el-input
+            v-model="userLogin.captchaCode"
+            placeholder="请输入图形验证码"
+            style="width: 45%; padding-right: 2px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            :loading="isLoading"
+            @click.native="loginBtn"
+          >登 录</el-button>
+          <el-button type="plain" @click="register">注册/忘记密码?</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </el-row>
 </template>
 
@@ -136,21 +180,17 @@ import { getMyInfo } from '@/api/user'
 import { keywordSuggest } from '@/api/search'
 
 export default {
-  name: 'NavBar1',
+  name: 'NavBar',
   mixins: [userMixin],
   data() {
     return {
       user: null,
-      drawer: false,
       activeIndex: '1',
-      activeIndex2: '1',
       restaurants: [],
       placeholder: '想要搜点神马呢',
       keyword: '',
-      timer: null,
       statusCount: 0,
-      msgCount: 10,
-      avatarUrl: '//pica.zhimg.com/v2-465c3f851b3e56844bf2be9ad5b54f95.jpg'
+      msgCount: 0
     }
   },
   created() {
@@ -167,6 +207,7 @@ export default {
     handleSelect(key, keyPath) {
       console.log(key, keyPath)
     },
+    // ****************************************************************************************************************
     // 重点：当框中的改变时触发该方法，elementui自动设置了防抖，参见debounce属性
     // queryString 为输入框中的值。cb为返回显示列表的回调函数
     querySearchAsync(queryString, cb) {
@@ -230,16 +271,15 @@ export default {
         window.open(routeUrl.href, '_blank')
       }
     },
+    // ****************************************************************************************************************
     login() {
       this.fetchPubkey()
-      this.dialogVisible2 = false
       this.dialogVisible = true
     },
     register() {
-      this.fetchPubkey()
-      this.dialogVisible2 = false
-      this.dialogVisible = true
+      window.open('//account.reghao.cn/login', '_blank')
     },
+    // ****************************************************************************************************************
     goToProfile() {
       const path = '/my'
       if (this.$route.path === path) {

src/components/layout/Profile.vue

@@ -1,213 +0,0 @@
-<template>
-  <div id="profile">
-    <!--登录弹窗-->
-    <el-dialog
-      title="用户登录"
-      append-to-body
-      :visible.sync="dialogVisible"
-      width="85%"
-      center
-    >
-      <el-input v-model="username" placeholder="请输入登录账号" clearable />
-      <br>
-      <br>
-      <el-input
-        v-model="password"
-        placeholder="请输入密码"
-        show-password
-      />
-      <br>
-      <br>
-      <span
-        class="register"
-      >没有账号？<a
-        href="javascript:void(0)"
-        @click="dialogVisible2 = true"
-      >点击注册</a></span>
-
-      <span slot="footer" class="dialog-footer">
-        <el-button
-          type="primary"
-          :loading="isLoading"
-          @click.native="loginBtn"
-        >登 录</el-button>
-      </span>
-    </el-dialog>
-    <!--注册弹窗-->
-    <el-dialog
-      title="用户注册"
-      append-to-body
-      :visible.sync="dialogVisible2"
-      width="85%"
-      center
-    >
-      <el-col class="avatar-name" style="padding-bottom: 10px">
-        <img :src="imageUrl" class="avatar"><br>
-        <el-upload
-          ref="uploadImg"
-          class="avatar-uploader"
-          :auto-upload="false"
-          :action="baseURL + '/upload'"
-          :show-file-list="false"
-          :on-change="imgChange"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-        >
-          <el-button
-            type="primary"
-            size="medium"
-            class="el-icon-plus avatar-uploader-icon"
-          >上传头像</el-button>
-        </el-upload>
-      </el-col>
-
-      <el-input
-        v-model="nickname"
-        placeholder="请输入您的昵称"
-        clearable
-        @blur="nickNameBlur"
-      />
-      <br>
-      <br>
-      <el-input
-        v-model="phone"
-        placeholder="请输入手机号码"
-        clearable
-        @blur="phoneBlur"
-      />
-      <br>
-      <br>
-      <el-input
-        v-model="password"
-        placeholder="请输入密码"
-        show-password
-      />
-      <br>
-      <br>
-      <el-input
-        v-model="repassword"
-        placeholder="确认密码"
-        show-password
-      />
-      <br>
-      <br>
-      <el-input
-        v-model="rcode"
-        placeholder="请输入验证码"
-        style="width: 45%; padding-right: 2px"
-      />
-      <el-button type="primary" :disabled="isBtn" @click="fetchVerifyCode">{{ code }}</el-button>
-
-      <span slot="footer" class="dialog-footer">
-        <el-button
-          type="primary"
-          :loading="isLoading"
-          @click.native="register"
-        >注 册</el-button>
-      </span>
-    </el-dialog>
-
-    <el-row justify="center">
-      <el-col class="avatar-name">
-        <img v-if="user" :src="user.avatarurl" class="avatar">
-        <img v-else src="@/assets/img/icon/avatar.png" class="avatar"><br>
-        <el-button
-          v-if="!user"
-          type="danger"
-          size="small"
-          @click="dialogVisible = true"
-        >登录/注册</el-button>
-        <span v-else>{{ user.nickname }}</span>
-      </el-col>
-    </el-row>
-
-    <div class="graySpace" />
-    <el-row :gutter="3">
-      <el-col
-        v-for="(item, index) in items"
-        :key="index"
-        :span="8"
-        class="item"
-        @click.native="itemClick(item.item)"
-      >
-        <img :src="item.img" alt="" class="icon-img">
-        <div class="detail">{{ item.item }}</div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { userMixin } from 'assets/js/mixin'
-
-export default {
-  name: 'Profile',
-  mixins: [userMixin],
-  data() {
-    return {
-      items: [
-        { img: require('assets/img/icon/history.png'), item: '历史记录' },
-        { img: require('assets/img/icon/mylike.png'), item: '我的收藏' },
-        { img: require('assets/img/icon/profile.png'), item: '个人资料' },
-        { img: require('assets/img/icon/exit.png'), item: '退出登录' }
-      ]
-    }
-  },
-  methods: {
-    itemClick(item) {
-      if (this.user === null) {
-        this.$message({
-          message: '尚未登录！',
-          type: 'warning'
-        })
-      } else {
-        if (item === '我的收藏') {
-          this.goToCollection()
-        } else if (item === '历史记录') {
-          this.goToHistory()
-        } else if (item === '个人资料') {
-          // todo
-        } else {
-          this.exitLogin()
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-#profile {
-  padding-top: 10px;
-  /*background-color: #9acfea;*/
-}
-
-.graySpace {
-  background: #eee;
-  height: 20px;
-}
-
-.avatar-name {
-  text-align: center;
-}
-
-.avatar {
-  width: 70px;
-  height: 70px;
-  border-radius: 50%;
-}
-
-.item {
-  margin-top: 5px;
-  cursor: pointer;
-  text-align: center;
-}
-
-.detail {
-  font-size: 15px;
-}
-
-.icon-img {
-  width: 50%;
-}
-</style>

src/main.js

@@ -38,7 +38,7 @@ Vue.use(BaiduMap, {
 })
 
 import VueAMap from 'vue-amap'
-Vue.use(VueAMap);
+Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: 'your amap key',
   plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
@@ -47,12 +47,12 @@ VueAMap.initAMapApiLoader({
 })
 
 import VueClipboards from 'vue-clipboard2'
-Vue.use(VueClipboards);
+Vue.use(VueClipboards)
 
 Vue.config.productionTip = false // 阻止控制台打印生产模式下的消息
 Vue.prototype.baseURL = '//api.reghao.cn'
 // this.$user 引用登录的用户
-Vue.prototype.$user = Vue.$cookies.get('user')
+// Vue.prototype.$user = Vue.$cookies.get('user')
 
 new Vue({
   render: h => h(App),

src/router/index.js

@@ -70,46 +70,6 @@ const PostAnalysis = () => import('views/post/PostAnalysis')
 // 使用安装路由插件
 Vue.use(VueRouter)
 const routes = [
-  {
-    path: '/sso',
-    name: 'sso',
-    redirect: '/sso/login',
-    component: () => import('@/views/sso/layout'),
-    children: [
-      {
-        path: '/sso/login',
-        meta: {
-          title: '验证码登录',
-          needLogin: false
-        },
-        component: () => import('@/views/sso/login')
-      },
-      {
-        path: '/sso/login1',
-        meta: {
-          title: '密码登录',
-          needLogin: false
-        },
-        component: () => import('@/views/sso/login1')
-      },
-      {
-        path: '/sso/register',
-        meta: {
-          title: '账号注册？',
-          needLogin: false
-        },
-        component: () => import('@/views/sso/register')
-      },
-      {
-        path: '/sso/forget',
-        meta: {
-          title: '找回密码？',
-          needLogin: false
-        },
-        component: () => import('@/views/sso/forget')
-      }
-    ]
-  },
   {
     path: '/my',
     name: 'My',

src/utils/request.js

@@ -61,13 +61,6 @@ instance.interceptors.response.use(
           store.commit('USER_LOGOUT')
           store.commit('delToken')
           removeAll()
-
-          router.replace({
-            path: '/sso/login',
-            query: {
-              redirect: router.currentRoute.fullPath
-            }
-          })
           break
         case 404:
           console.error('网络请求不存在')

src/views/post/AudioPost.vue

@@ -6,53 +6,59 @@
         style="width: 100%"
       >
         <el-table-column
-          type="index">
-        </el-table-column>
+          type="index"
+        />
         <el-table-column
           prop="publishAt"
-          label="发布时间">
-        </el-table-column>
+          label="发布时间"
+        />
         <el-table-column
           prop="title"
-          label="音频名字">
+          label="音频名字"
+        >
           <template slot-scope="scope">
             <router-link target="_blank" :to="`/audio/${scope.row.audioId}`">
-              <span>{{scope.row.title}}</span>
+              <span>{{ scope.row.title }}</span>
             </router-link>
           </template>
         </el-table-column>
         <el-table-column
           prop="duration"
-          label="时长">
-        </el-table-column>
+          label="时长"
+        />
         <el-table-column
           prop="codec"
-          label="编码">
-        </el-table-column>
+          label="编码"
+        />
         <el-table-column
           prop="scope"
-          label="可见范围">
+          label="可见范围"
+        >
           <template slot-scope="scope">
             <el-tooltip class="item" effect="dark" content="点击修改可见范围" placement="top-end">
               <el-button
                 v-if="scope.row.scope === 1"
                 size="mini"
-                @click="handleScope(scope.$index, scope.row)">本人可见</el-button>
+                @click="handleScope(scope.$index, scope.row)"
+              >本人可见</el-button>
               <el-button
                 v-else-if="scope.row.scope === 2"
                 size="mini"
                 type="success"
-                @click="handleScope(scope.$index, scope.row)">所有人可见</el-button>
+                @click="handleScope(scope.$index, scope.row)"
+              >所有人可见</el-button>
               <el-button
                 v-else-if="scope.row.scope === 3"
                 size="mini"
                 type="warning"
-                @click="handleScope(scope.$index, scope.row)">VIP 可见</el-button>
+                @click="handleScope(scope.$index, scope.row)"
+              >VIP 可见</el-button>
               <el-button
                 v-else
                 size="mini"
                 type="danger"
-                @click="handleScope(scope.$index, scope.row)">验证码可见</el-button>
+                @click="handleScope(scope.$index, scope.row)"
+              >验证码可见</el-button>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -60,11 +66,13 @@
           <template slot-scope="scope">
             <el-button
               size="mini"
-              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+              @click="handleEdit(scope.$index, scope.row)"
+            >编辑</el-button>
             <el-button
               size="mini"
               type="danger"
-              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+              @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -96,17 +104,17 @@
 </template>
 
 <script>
-import { updateAudioScope, deleteAudioPost } from "@/api/audio";
+import { updateAudioScope, deleteAudioPost } from '@/api/audio'
 
 export default {
   name: 'AudioPost',
+  components: {},
   props: {
     dataList: {
       type: Array,
       default: []
-    },
+    }
   },
-  components: {},
   data() {
     return {
       showEditScopeDialog: false,
@@ -121,7 +129,7 @@ export default {
   methods: {
     handleScope(index, row) {
       this.form.audioId = row.audioId
-      this.form.scope = ''+row.scope
+      this.form.scope = '' + row.scope
       this.showEditScopeDialog = true
     },
     handleEdit(index, row) {
@@ -141,7 +149,7 @@ export default {
               type: 'warning',
               duration: 3000
             })
-            //this.$router.go(0)
+            // this.$router.go(0)
           }
         })
       }).catch(() => {

src/views/sso/forget.vue

@@ -1,262 +0,0 @@
-<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="sms_code">
-          <el-input
-            v-model="form.sms_code"
-            placeholder="短信验证码"
-            class="cuborder-radius"
-            maxlength="6"
-            @keyup.enter.native="onSubmit('form')"
-            style="width: 205px"
-          />
-          <div class="send-code-btn send-sms-disable" v-if="smsLock">
-            正在发送 ...
-          </div>
-          <div
-            class="send-code-btn"
-            v-else-if="smsLock == false && smsLockObj.time == null"
-            @click="sendSms"
-          >
-            获取短信
-          </div>
-          <div class="send-code-btn send-sms-disable" v-else>
-            重新发送({{ smsLockObj.time }}s)
-          </div>
-        </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="password2">
-          <el-input
-            v-model="form.password2"
-            type="password"
-            placeholder="确认新密码"
-            class="cuborder-radius"
-            @keyup.enter.native="onSubmit('form')"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            type="primary"
-            class="submit-btn"
-            :loading="forgetLoading"
-            @click="onSubmit('form')"
-            >立即找回
-          </el-button>
-        </el-form-item>
-
-        <el-form-item>
-          <div class="links">
-            <el-link
-              type="primary"
-              :underline="false"
-              @click="toLink('/sso/register')"
-              >注册账号
-            </el-link>
-            <el-link
-              type="primary"
-              :underline="false"
-              @click="toLink('/sso/login')"
-              >已有账号，立即登录?
-            </el-link>
-          </div>
-        </el-form-item>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ServeForgetPassword, ServeSendVerifyCode } from '@/api/account'
-import { isMobile } from '@/utils/validate'
-import SmsLock from '@/utils/sms-lock'
-
-export default {
-  name: 'ForgetPasswordPage',
-  data() {
-    let validateMobile = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('手机号不能为空！'))
-      } else {
-        isMobile(value) ? callback() : callback(new Error('手机号格式不正确！'))
-      }
-    }
-
-    let validatePass2 = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请再次输入密码'))
-      } else if (value !== this.form.password) {
-        callback(new Error('两次输入密码不一致!'))
-      } else {
-        callback()
-      }
-    }
-
-    return {
-      forgetLoading: false,
-
-      form: {
-        username: '',
-        password: '',
-        password2: '',
-        sms_code: '',
-      },
-
-      rules: {
-        username: [
-          {
-            validator: validateMobile,
-            trigger: 'blur',
-          },
-        ],
-        password: [
-          {
-            required: true,
-            message: '登录密码不能为空!',
-            trigger: 'blur',
-          },
-        ],
-        password2: [
-          {
-            validator: validatePass2,
-            trigger: 'blur',
-          },
-        ],
-        sms_code: [
-          {
-            required: true,
-            message: '验证码不能为空!',
-            trigger: 'blur',
-          },
-        ],
-      },
-
-      smsLock: false,
-      smsLockObj: null,
-    }
-  },
-  created() {
-    this.smsLockObj = new SmsLock('FORGET_PSW_SMS', 60)
-  },
-  destroyed() {
-    this.smsLockObj.clearInterval()
-  },
-  methods: {
-    toLink(url) {
-      this.$router.push({
-        path: url,
-      })
-    },
-
-    onSubmit(formName) {
-      if (this.forgetLoading) return false
-
-      this.$refs[formName].validate(valid => {
-        if (!valid) return false
-        this.forgetLoading = true
-        this.forgetAccount()
-      })
-    },
-
-    forgetAccount() {
-      ServeForgetPassword({
-        mobile: this.form.username,
-        password: this.form.password,
-        sms_code: this.form.sms_code,
-      })
-        .then(res => {
-          this.forgetLoading = false
-          if (res.code == 200) {
-            this.$notify({
-              title: '成功',
-              message: '密码修改成功,快去登录吧...',
-              type: 'success',
-            })
-
-            this.$refs.form.resetFields()
-            setTimeout(() => {
-              this.$router.push('/sso/login')
-            }, 1500)
-          } else {
-            this.$notify({
-              message: res.message,
-            })
-          }
-        })
-        .catch(() => {
-          this.forgetLoading = false
-          this.$notify({
-            message: '网络错误,请稍后再试...',
-          })
-        })
-    },
-
-    //点击发送验证码
-    sendSms() {
-      if (this.smsLock) return false
-
-      if (!isMobile(this.form.username)) {
-        this.$refs.form.validateField('username')
-        return false
-      }
-
-      this.smsLock = true
-      ServeSendVerifyCode({
-        mobile: this.form.username,
-        channel: 'forget_account',
-      })
-        .then(res => {
-          if (res.code == 200) {
-            this.smsLockObj.start()
-            this.$notify({
-              title: '成功',
-              message: '验证码发送成功...',
-              type: 'success',
-            })
-
-            if (res.data.is_debug) {
-              setTimeout(() => {
-                this.$notify({
-                  title: '提示',
-                  message: '已自动填充验证码',
-                })
-
-                this.form.sms_code = res.data.sms_code
-              }, 500)
-            }
-          } else {
-            this.$notify({
-              title: '提示',
-              message: '验证码发送失败...',
-            })
-          }
-        })
-        .finally(() => {
-          this.smsLock = false
-        })
-    },
-  },
-}
-</script>
-<style lang="scss" scoped>
-@import '~@/assets/css/login-auth.scss';
-</style>

src/views/sso/layout.vue

@@ -1,14 +0,0 @@
-<template>
-  <div>
-    <el-container id="auth-container">
-      <el-main>
-        <router-view />
-<!--        <div class="copyright" v-html="$store.state.copyright"></div>-->
-      </el-main>
-    </el-container>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@import '~@/assets/css/login-auth.scss';
-</style>

src/views/sso/login.vue

@@ -1,263 +0,0 @@
-<template>
-  <div id="login-box">
-    <div class="header">登录</div>
-    <div class="main">
-      <el-form ref="form" :model="form" :rules="rules">
-        <el-form-item prop="principal">
-          <el-input
-            v-model="form.principal"
-            placeholder="手机号"
-            class="cuborder-radius"
-            @keyup.enter.native="onSubmit('form')"
-          />
-        </el-form-item>
-        <el-form-item prop="credential">
-          <el-input
-            v-model="form.credential"
-            placeholder="验证码"
-            class="cuborder-radius"
-            maxlength="6"
-            style="width: 205px"
-            @keyup.enter.native="onSubmit('form')"
-          />
-          <div v-if="smsLock" class="send-code-btn send-sms-disable">
-            正在发送 ...
-          </div>
-          <div
-            v-else-if="smsLock === false && smsLockObj.time === null"
-            class="send-code-btn"
-            @click="sendSms"
-          >
-            获取验证码
-          </div>
-          <div v-else class="send-code-btn send-sms-disable">
-            重新发送({{ smsLockObj.time }}s)
-          </div>
-        </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="loginLoading"
-            @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/login1')"
-            >密码登录
-            </el-link>
-          </div>
-        </el-form-item>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ServeCaptcha, ServeLogin, ServePubkey, ServeSendVerifyCode } from '@/api/account'
-import { userMixin } from 'assets/js/mixin'
-import { isMobile } from '@/utils/validate'
-import SmsLock from '@/utils/sms-lock'
-import { JSEncrypt } from 'jsencrypt'
-import Vue from 'vue'
-
-export default {
-  mixins: [userMixin],
-  data() {
-    const validateMobile = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('登录手机号不能为空！'))
-      } else {
-        // isMobile(value) ? callback() : callback(new Error('登录手机号格式不正确！'))
-        callback()
-      }
-    }
-    return {
-      loginLoading: false,
-      form: {
-        loginType: 1,
-        plat: 1,
-        principal: '',
-        credential: '',
-        captchaCode: ''
-      },
-      pubkey: {
-        key: '',
-        r: ''
-      },
-      captchaCode: '',
-      rules: {
-        principal: [
-          {
-            validator: validateMobile,
-            trigger: 'blur'
-          },
-          {
-            min: 1,
-            max: 100,
-            message: '手机号格式不正确!',
-            trigger: 'blur'
-          }
-        ],
-        credential: [
-          {
-            required: true,
-            message: '登录密码不能为空!',
-            trigger: 'blur'
-          }
-        ]
-      },
-      smsLock: false,
-      smsLockObj: null
-    }
-  },
-  created() {
-    const userdata = Vue.$cookies.get('USERDATA')
-    if (userdata !== null) {
-      this.$router.push('/')
-    } else {
-      this.getPubkey()
-      this.smsLockObj = new SmsLock('LOGIN_SMS', 60)
-    }
-  },
-  destroyed() {
-    this.smsLockObj.clearInterval()
-  },
-  methods: {
-    onSubmit(formName) {
-      if (this.loginLoading) return false
-
-      this.$refs[formName].validate(valid => {
-        if (!valid) return false
-        this.loginLoading = true
-        this.login()
-      })
-    },
-    getCaptcha() {
-      ServeCaptcha().then(res => {
-        if (res.code === 0) {
-          this.captchaCode = res.data
-        } else {
-          this.$notify.info({
-            title: '提示',
-            message: '获取 Captcha 失败, 请重新刷新页面...'
-          })
-        }
-      }).finally(() => {
-      })
-    },
-    getPubkey() {
-      ServePubkey().then(res => {
-        if (res.code === 0) {
-          this.pubkey.key = res.data.pubkey
-          this.pubkey.r = res.data.r
-
-          this.getCaptcha()
-        } else {
-          this.$notify.info({
-            title: '提示',
-            message: '获取公钥失败, 请重新刷新页面...'
-          })
-        }
-      }).finally(() => {
-      })
-    },
-    encryptPassword(password) {
-      var encryptor = new JSEncrypt()
-      encryptor.setPublicKey(this.pubkey.key)
-      return encryptor.encrypt(this.pubkey.r + password)
-    },
-    async login() {
-      ServeLogin({
-        loginType: this.form.loginType,
-        plat: this.form.plat,
-        principal: this.form.principal,
-        credential: this.encryptPassword(this.form.credential),
-        captchaCode: this.form.captchaCode
-      }).then(res => {
-        if (res.code === 0) {
-          const resData = res.data
-          /* const userInfo = resData.userInfo
-            const userToken = resData.userToken
-            setUserToken(userToken)
-            this.$store.commit('UPDATE_USER_INFO', userInfo)*/
-          this.$router.push('/')
-        } else {
-          this.$notify.info({
-            title: '提示',
-            message: res.msg
-          })
-        }
-      }).finally(() => {
-        this.loginLoading = false
-      })
-    },
-    sendSms() {
-      if (this.smsLock) return false
-      if (!isMobile(this.form.username)) {
-        this.$refs.form.validateField('username', (val) => {
-          return !val
-        })
-      }
-
-      this.smsLock = true
-      ServeSendVerifyCode({
-        receiver: this.form.principal,
-        notifyType: 3
-      }).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            title: '成功',
-            message: '验证码发送成功...',
-            type: 'success'
-          })
-          this.smsLockObj.start()
-        } else {
-          this.$notify({
-            title: '提示',
-            message: res.message,
-            customClass: 'cus-notifyclass'
-          })
-        }
-      }).finally(() => {
-        this.smsLock = false
-      })
-    },
-    toLink(url) {
-      this.$router.push({
-        path: url
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import '~@/assets/css/login-auth.scss';
-</style>

src/views/sso/login1.vue

@@ -1,369 +0,0 @@
-<template>
-  <div id="login-box">
-    <div class="header">登录</div>
-    <div class="main">
-      <el-form ref="form" :model="form" :rules="rules">
-        <el-form-item prop="principal">
-          <el-input
-            v-model="form.principal"
-            placeholder="用户名/邮箱/手机号"
-            class="cuborder-radius"
-            maxlength="64"
-            @keyup.enter.native="onSubmit('form')"
-          />
-        </el-form-item>
-        <el-form-item prop="credential">
-          <el-input
-            v-model="form.credential"
-            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="loginLoading"
-            @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, ServeLogin, ServePubkey } from '@/api/account'
-import { JSEncrypt } from 'jsencrypt'
-
-export default {
-  data() {
-    const validatePass = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请再次输入密码'))
-      } else if (value !== this.form.credential) {
-        callback(new Error('两次输入密码不一致!'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      captchaCode: '',
-      loginLoading: false,
-      pubkey: {
-        key: '',
-        r: ''
-      },
-      form: {
-        principal: '',
-        credential: '',
-        captchaCode: '',
-        plat: 2
-      },
-      rules: {
-        principal: [
-          {
-            required: true,
-            message: '用户名不能为空!',
-            trigger: 'blur'
-          }
-        ],
-        credential: [
-          {
-            validator: validatePass,
-            trigger: 'blur'
-          },
-          {
-            min: 1,
-            max: 100,
-            message: '手机号格式不正确!',
-            trigger: 'blur'
-          }
-        ]
-      }
-    }
-  },
-  created() {
-    this.getCaptcha()
-  },
-  methods: {
-    getCaptcha() {
-      ServeCaptcha().then(res => {
-        if (res.code === 0) {
-          this.captchaCode = res.data
-        } else {
-          this.$notify.info({
-            title: '提示',
-            message: '获取 Captcha 失败, 请重新刷新页面...'
-          })
-        }
-      }).finally(() => {
-      })
-    },
-    getPubkey() {
-      ServePubkey().then(res => {
-        if (res.code === 0) {
-          this.pubkey.key = res.data.pubkey
-          this.pubkey.r = res.data.r
-
-          this.getCaptcha()
-        } else {
-          this.$notify.info({
-            title: '提示',
-            message: '获取公钥失败, 请重新刷新页面...'
-          })
-        }
-      }).finally(() => {
-      })
-    },
-    encryptPassword(password) {
-      var encryptor = new JSEncrypt()
-      encryptor.setPublicKey(this.pubkey.key)
-      return encryptor.encrypt(this.pubkey.r + password)
-    },
-    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.loginLoading) return false
-
-      this.$refs[formName].validate(valid => {
-        if (!valid) return false
-        this.loginLoading = true
-        this.login()
-      })
-    },
-    async login() {
-      ServeLogin({
-        loginType: this.form.loginType,
-        plat: this.form.plat,
-        principal: this.form.principal,
-        credential: this.encryptPassword(this.form.credential),
-        captchaCode: this.form.captchaCode
-      }).then(res => {
-        if (res.code === 0) {
-          this.$refs.form.resetFields()
-          const resData = res.data
-          /* const userInfo = resData.userInfo
-            const userToken = resData.userToken
-            setUserToken(userToken)
-            this.$store.commit('UPDATE_USER_INFO', userInfo)*/
-          this.$router.push('/')
-        } else {
-          this.$notify.info({
-            title: '提示',
-            message: res.msg
-          })
-        }
-      }).finally(() => {
-        this.loginLoading = false
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-#deep.el-input__inner {
-  border-radius: 1px !important;
-}
-
-#auth-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-color: #f6f8fb;
-  #logo-name {
-    width: 200px;
-    height: 38px;
-    font-size: 34px;
-    font-family: Times New Roman, Georgia, serif;
-    color: #2196f3;
-    margin-left: 20px;
-    margin-top: 20px;
-  }
-  #login-box {
-    position: absolute;
-    width: 350px;
-    min-height: 480px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    background-color: white;
-    border-radius: 5px;
-    box-shadow: 0 4px 14px 0 rgba(206,207,209,0.5);
-    padding: 10px 20px;
-    .header {
-      width: 100%;
-      height: 38px;
-      font-size: 22px;
-      margin: 25px 0 20px 0;
-    }
-    .main {
-      width: 100%;
-      .links {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        a {
-          font-weight: normal !important;
-        }
-      }
-      .send-code-btn {
-        width: 140px;
-        height: 40px;
-        line-height: 40px;
-        display: inline-block;
-        background: #f3ecec;
-        text-align: center;
-        color: #777373;
-        cursor: pointer;
-        user-select: none;
-        margin-left: 5px;
-        &:active {
-          background: #e4dbdb;
-        }
-      }
-      .send-sms-disable {
-        cursor: not-allowed !important;
-        background: #f7f7f7 !important;
-        color: silver !important;
-      }
-      .submit-btn {
-        width: 100%;
-        border-radius: 2px;
-      }
-    }
-  }
-}
-.preview-account {
-  text-align: center;
-  p {
-    height: 25px;
-    line-height: 25px;
-    color: #2d2c2c;
-    font-weight: 100;
-    font-size: 12px;
-  }
-}
-.copyright {
-  position: absolute;
-  bottom: 30px;
-  left: 0;
-  right: 0;
-  width: 70%;
-  text-align: center;
-  margin: 0 auto;
-  font-size: 12px;
-  color: #b1a0a0;
-  a {
-    color: #777272;
-    font-weight: 400;
-  }
-}
-@media screen and (max-height : 500px) {
-  .copyright {
-    display: none;
-  }
-}
-
-.fly-box {
-  .bg-fly-circle1 {
-    left: 40px;
-    top: 100px;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    background: linear-gradient(to right,rgba(100,84,239,0.07) 0%,rgba(48,33,236,0.04) 100%);
-    animation: move 2.5s linear infinite;
-  }
-  .bg-fly-circle2 {
-    left: 3%;
-    top: 60%;
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    background: linear-gradient(to right,rgba(100,84,239,0.08) 0%,rgba(48,33,236,0.04) 100%);
-    animation: move 3s linear infinite;
-  }
-  .bg-fly-circle3 {
-    right: 2%;
-    top: 140px;
-    width: 145px;
-    height: 145px;
-    border-radius: 50%;
-    background: linear-gradient(to right,rgba(100,84,239,0.1) 0%,rgba(48,33,236,0.04) 100%);
-    animation: move 2.5s linear infinite;
-  }
-  .bg-fly-circle4 {
-    right: 5%;
-    top: 60%;
-    width: 160px;
-    height: 160px;
-    border-radius: 50%;
-    background: linear-gradient(to right,rgba(100,84,239,0.02) 0%,rgba(48,33,236,0.04) 100%);
-    animation: move 3.5s linear infinite;
-  }
-}
-@keyframes move {
-  0% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(25px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
-</style>

src/views/sso/register.vue

@@ -1,314 +0,0 @@
-<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="password2">
-          <el-input
-            v-model="form.password2"
-            type="password"
-            placeholder="确认密码"
-            class="cuborder-radius"
-            @keyup.enter.native="onSubmit('form')"
-          />
-        </el-form-item>
-        <el-form-item prop="mobile">
-          <el-input
-            v-model="form.mobile"
-            placeholder="手机号"
-            class="cuborder-radius"
-            maxlength="11"
-            @keyup.enter.native="onSubmit('form')"
-          />
-        </el-form-item>
-        <el-form-item prop="smsCode">
-          <el-input
-            v-model="form.smsCode"
-            placeholder="验证码"
-            class="cuborder-radius"
-            maxlength="6"
-            style="width: 205px"
-            @keyup.enter.native="onSubmit('form')"
-          />
-
-          <div v-if="smsLock" class="send-code-btn send-sms-disable">
-            正在发送 ...
-          </div>
-          <div
-            v-else-if="smsLock === false && smsLockObj.time === null"
-            class="send-code-btn"
-            @click="sendSms"
-          >
-            获取验证码
-          </div>
-          <div v-else class="send-code-btn send-sms-disable">
-            重新发送({{ smsLockObj.time }}s)
-          </div>
-        </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/login')"
-            >
-              已有账号?
-            </el-link>
-          </div>
-        </el-form-item>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ServeCaptcha, ServeRegister, ServeSendVerifyCode } from '@/api/account'
-import { isMobile } from '@/utils/validate'
-import SmsLock from '@/utils/sms-lock'
-
-export default {
-  data() {
-    const validateMobile = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('手机号不能为空！'))
-        return
-      }
-
-      if (!isMobile(value)) {
-        callback(new Error('手机号格式不正确！'))
-      } else {
-        callback()
-      }
-    }
-
-    const 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>