添加帐号注册和找回密码功能

src/api/account.js

@@ -9,12 +9,13 @@ const accountApi = {
   captchaCodeApi: '/api/auth/code/captcha',
   pubkeyApi: '/api/auth/code/pubkey',
 
+  registerApi: '/api/auth/create',
+  forgotApi: '/api/auth/forgot',
+  loginApi: '/api/auth/signin',
+  logoutApi: '/api/auth/signout',
   accountVipApi: '/api/account/vip/basic',
-  registerApi: '/api/account/user/register',
   resetPasswordApi: '/api/account/user/reset',
-  updateAvatarApi: '/api/account/profile/avatar',
-  loginApi: '/api/auth/signin',
-  logoutApi: '/api/auth/signout'
+  updateAvatarApi: '/api/account/profile/avatar'
 }
 
 export function isUsernameExist(username) {
@@ -33,13 +34,17 @@ export function register(userRegistry) {
   return post(accountApi.registerApi, userRegistry)
 }
 
+export function forgot(userRegistry) {
+  return post(accountApi.forgotApi, userRegistry)
+}
+
 export function resetPassword(resetPasswordData) {
   return post(accountApi.resetPasswordApi, resetPasswordData)
 }
 
 // 获取公钥
-export function getPubkey() {
-  return get(accountApi.pubkeyApi)
+export function getPubkey(channel) {
+  return get(accountApi.pubkeyApi + '?channel=' + channel)
 }
 
 // 获取图形验证码

src/assets/js/mixin.js

@@ -1,7 +1,7 @@
 /**
  * 混入对象，抽取Vue中公共的部分
  */
-import { getPubkey, getCaptchaCode, getVerifyCode, login, logout } from '@/api/account'
+import {getPubkey, getCaptchaCode, getVerifyCode, login, logout, register, forgot } from '@/api/account'
 import { setUserToken, removeAll } from '@/utils/auth'
 import { JSEncrypt } from 'jsencrypt'
 import Vue from 'vue'
@@ -19,6 +19,19 @@ export const userMixin = {
         loginType: 2,
         plat: 2
       },
+      userRegistry: {
+        principal: null,
+        verifyCode: null,
+        credential: null,
+        captchaCode: null,
+        plat: 2
+      },
+      userForgot: {
+        principal: null,
+        verifyCode: null,
+        newCredential: null,
+        captchaCode: null,
+      },
       loginDialog: false,
       registerDialog: false,
       dialogVisible: false,
@@ -39,8 +52,8 @@ export const userMixin = {
     }
   },
   methods: {
-    fetchPubkey() {
-      getPubkey().then(resp => {
+    fetchPubkey(channel) {
+      getPubkey(channel).then(resp => {
         if (resp.code === 0) {
           this.pubkey = resp.data.pubkey
           this.pubkeyR = resp.data.r
@@ -71,12 +84,31 @@ export const userMixin = {
       encryptor.setPublicKey(pubkey)
       return encryptor.encrypt(pubkeyR + password)
     },
-    fetchVerifyCode() {
+    loginVerifyCode() {
       if (this.userLogin.principal === null || this.userLogin.principal === '') {
-        this.$message.success('请填写手机号')
+        this.$message.success('请填写邮箱或手机号')
+        return
+      }
+
+      getVerifyCode(1, this.userRegistry.principal)
+    },
+    registerVerifyCode() {
+      if (this.userRegistry.principal === null || this.userRegistry.principal === '') {
+        this.$message.success('请填写邮箱或手机号')
+        return
+      }
+
+      this.getVerifyCode(2, this.userRegistry.principal)
+    },
+    forgotVerifyCode() {
+      if (this.userForgot.principal === null || this.userForgot.principal === '') {
+        this.$message.success('请填写邮箱或手机号')
         return
       }
 
+      this.getVerifyCode(3, this.userForgot.principal)
+    },
+    getVerifyCode(channel, receiver) {
       this.isBtn = true
       let time = 60
       const timeout = setInterval(() => {
@@ -91,8 +123,8 @@ export const userMixin = {
       }, 1000)
 
       const verifyCodeReq = {}
-      verifyCodeReq.receiver = this.userLogin.principal
-      verifyCodeReq.notifyType = 2
+      verifyCodeReq.receiver = receiver
+      verifyCodeReq.channel = channel
       getVerifyCode(verifyCodeReq).then(resp => {
         if (resp.code === 0) {
           this.$message.success('验证码已发送, 请注意查收')
@@ -116,9 +148,7 @@ export const userMixin = {
       }
     },
     loginBtn() {
-      // 显示加载效果
-      this.isLoading = true
-      if (this.userLogin.principal === '') {
+      if (this.userLogin.principal === '' || this.userLogin.principal === null) {
         this.$message.warning('手机号不能为空')
         return
       }
@@ -126,12 +156,14 @@ export const userMixin = {
         this.$message.warning('短信验证码不能为空')
         return
       }
-      if (this.userLogin.captchaCode === '') {
+      if (this.userLogin.captchaCode === '' || this.userLogin.captchaCode === null) {
         this.$message.warning('图形验证码不能为空')
         return
       }
 
       this.userLogin.credential = this.encryptPassword(this.userLogin.credential, this.pubkey, this.pubkeyR)
+      // 显示加载效果
+      this.isLoading = true
       login(this.userLogin).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
@@ -152,6 +184,7 @@ export const userMixin = {
         // 登录请求错误
         this.$message.error(error)
       }).finally(() => {
+        this.isLoading = false
         this.userLogin = {
           principal: null,
           credential: null,
@@ -161,6 +194,92 @@ export const userMixin = {
         }
       })
     },
+    registerBtn() {
+      if (this.userRegistry.principal === '' || this.userRegistry.principal === null) {
+        this.$message.warning('手机号不能为空')
+        return
+      }
+      if (this.userRegistry.credential === '' || this.userRegistry.credential === null) {
+        this.$message.warning('密码不能为空')
+        return
+      }
+      if (this.userRegistry.verifyCode === '' || this.userRegistry.verifyCode === null) {
+        this.$message.warning('短信验证码不能为空')
+        return
+      }
+      if (this.userRegistry.captchaCode === '' || this.userRegistry.captchaCode === null) {
+        this.$message.warning('图形验证码不能为空')
+        return
+      }
+
+      this.userRegistry.credential = this.encryptPassword(this.userRegistry.credential, this.pubkey, this.pubkeyR)
+      // 显示加载效果
+      this.isLoading = true
+      register(this.userRegistry).then(resp => {
+        if (resp.code === 0) {
+          // 关闭弹窗并刷新页面
+          this.dialogVisible = false
+          this.$message.info('帐号已注册, 请返回登录页面登录帐号')
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error)
+      }).finally(() => {
+        this.isLoading = false
+        this.userRegistry = {
+          principal: null,
+          credential: null,
+          captchaCode: null,
+          loginType: 2,
+          plat: 1
+        }
+      })
+    },
+    forgotBtn() {
+      if (this.userForgot.principal === '' || this.userForgot.principal === null) {
+        this.$message.warning('手机号不能为空')
+        return
+      }
+      if (this.userForgot.newCredential === '' || this.userForgot.newCredential === null) {
+        this.$message.warning('密码不能为空')
+        return
+      }
+      if (this.userForgot.verifyCode === '' || this.userForgot.verifyCode === null) {
+        this.$message.warning('短信验证码不能为空')
+        return
+      }
+      if (this.userForgot.captchaCode === '' || this.userForgot.captchaCode === null) {
+        this.$message.warning('图形验证码不能为空')
+        return
+      }
+
+      this.userForgot.newCredential = this.encryptPassword(this.userForgot.newCredential, this.pubkey, this.pubkeyR)
+      // 显示加载效果
+      this.isLoading = true
+      forgot(this.userForgot).then(resp => {
+        if (resp.code === 0) {
+          // 关闭弹窗并刷新页面
+          this.dialogVisible = false
+          this.$message.info('密码已重置, 请返回登录页面登录帐号')
+        } else {
+          this.$message.warning(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error)
+      }).finally(() => {
+        this.isLoading = false
+        this.userForgot = {
+          principal: null,
+          verifyCode: null,
+          newCredential: null,
+          captchaCode: null
+        }
+      })
+    },
+    goToHome() {
+      this.$router.push('/')
+    },
     goToLogout() {
       this.$confirm('退出登录, 是否继续?', '提示', {
         confirmButtonText: '确定',

src/components/layout/NavBar.vue

@@ -58,16 +58,16 @@
               alt=""
             >
             <el-dropdown-menu v-if="user" slot="dropdown" class="iconsize">
-              <el-dropdown-item
-                icon="el-icon-files"
-                class="size"
-                @click.native="goToDisk"
-              >我的网盘</el-dropdown-item>
               <el-dropdown-item
                 icon="el-icon-user-solid"
                 class="size"
                 @click.native="goToProfile"
               >我的帐号</el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-files"
+                class="size"
+                @click.native="goToDisk"
+              >我的网盘</el-dropdown-item>
               <el-dropdown-item
                 icon="el-icon-s-home"
                 class="size"
@@ -145,7 +145,7 @@
             placeholder="请输入验证码"
             style="width: 45%; padding-right: 2px"
           />
-          <el-button :disabled="isBtn" @click="fetchVerifyCode">{{ code }}</el-button>
+          <el-button :disabled="isBtn" @click="loginVerifyCode">{{ code }}</el-button>
         </el-form-item>
         <el-form-item label="图形验证码" label-width="90px">
           <el-image :src="captchaCode" @click="getCaptcha" />
@@ -264,10 +264,6 @@ export default {
       }
     },
     // ****************************************************************************************************************
-    login1() {
-      this.fetchPubkey()
-      this.dialogVisible = true
-    },
     login() {
       const path = '/login'
       if (this.$route.path === path) {

src/router/index.js

@@ -568,6 +568,18 @@ const routes = [
     component: () => import('@/views/login.vue'),
     meta: { needAuth: false }
   },
+  {
+    path: '/register',
+    name: 'Register',
+    component: () => import('@/views/register.vue'),
+    meta: { needAuth: false }
+  },
+  {
+    path: '/forgot',
+    name: 'Forgot',
+    component: () => import('@/views/forgot.vue'),
+    meta: { needAuth: false }
+  },
   {
     path: '*',
     name: '404',

src/views/forgot.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-container>
+    <el-main>
+      <login-bar />
+      <router-view />
+      <el-row class="movie-list">
+        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
+        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
+        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; text-align: center">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>找回密码</span>
+              </div>
+              <div class="text item">
+                <el-form ref="form" :model="userForgot" label-width="100px">
+                  <el-form-item label="邮箱/手机号" label-width="100px">
+                    <el-input
+                      v-model="userForgot.principal"
+                      placeholder="请输入邮箱或手机号"
+                      style="width: 45%; padding-right: 10px"
+                    />
+                    <el-button :disabled="isBtn" @click="forgotVerifyCode">{{ code }}</el-button>
+                  </el-form-item>
+                  <el-form-item label="验证码" label-width="90px">
+                    <el-input
+                      v-model="userForgot.verifyCode"
+                      placeholder="请输入短信验证码"
+                      style="padding-right: 1px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="新密码">
+                    <el-input
+                      v-model="userForgot.newCredential"
+                      type="password"
+                      placeholder="请输入新密码"
+                      style="padding-right: 1px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="图形验证码" label-width="90px">
+                    <el-image :src="captchaCode" @click="getCaptcha" />
+                    <el-input
+                      v-model="userForgot.captchaCode"
+                      placeholder="请输入图形验证码"
+                      style="width: 50%; padding-right: 10px"
+                    />
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button
+                      type="primary"
+                      :loading="isLoading"
+                      @click.native="forgotBtn"
+                    >找回</el-button>
+                    <el-button type="plain" @click="login">返回登录</el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-card>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { userMixin } from 'assets/js/mixin'
+import LoginBar from 'components/layout/LoginBar'
+
+export default {
+  name: 'Forgot',
+  components: {
+    LoginBar
+  },
+  mixins: [userMixin],
+  watch: {
+    $route() {
+      this.$router.go()
+    }
+  },
+  created() {
+    document.title = '找回密码'
+    this.fetchPubkey(3)
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    login() {
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+</style>

src/views/home/Index.vue

@@ -95,8 +95,8 @@ export default {
             this.$notify(
               {
                 message: '已经到底啦~~~',
-                type: 'warning',
-                duration: 3000
+                type: 'info',
+                duration: 1000
               }
             )
             return

src/views/login.vue

@@ -44,7 +44,8 @@
                       :loading="isLoading"
                       @click.native="loginBtn"
                     >登 录</el-button>
-                    <el-button type="plain" @click="register">注册/忘记密码?</el-button>
+                    <el-button type="plain" @click="register">注册帐号</el-button>
+                    <el-button type="plain" @click="forgot">忘记密码</el-button>
                   </el-form-item>
                 </el-form>
               </div>
@@ -66,21 +67,29 @@ export default {
     LoginBar
   },
   mixins: [userMixin],
-  data() {
-    return {
+  watch: {
+    $route() {
+      this.$router.go()
     }
   },
   created() {
     document.title = '用户登录'
-    this.fetchPubkey()
+    this.fetchPubkey(1)
+  },
+  data() {
+    return {
+    }
   },
   methods: {
-    login() {
+    /*login() {
       this.fetchPubkey()
       this.dialogVisible = true
-    },
+    },*/
     register() {
-      console.log('帐号注册')
+      this.$router.push('/register')
+    },
+    forgot() {
+      this.$router.push('/forgot')
     }
   }
 }

src/views/my/My.vue

@@ -19,12 +19,16 @@
           alt=""
         >
         <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            icon="el-icon-s-home"
+            class="size"
+            @click.native="goToHome"
+          >主页</el-dropdown-item>
           <el-dropdown-item
             icon="el-icon-error"
             class="size"
             @click.native="goToLogout"
           >退出</el-dropdown-item>
-          <el-dropdown-item>查看</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </el-header>
@@ -180,9 +184,12 @@
 </template>
 
 <script>
+import { userMixin } from 'assets/js/mixin'
 import { getAuthedUser } from '@/utils/auth'
 
 export default {
+  name: 'My',
+  mixins: [userMixin],
   data() {
     return {
       user: null

src/views/register.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-container>
+    <el-main>
+      <login-bar />
+      <router-view />
+      <el-row class="movie-list">
+        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
+        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
+        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; text-align: center">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                <span>注册帐号</span>
+              </div>
+              <div class="text item">
+                <el-form ref="form" :model="userRegistry" label-width="100px">
+                  <el-form-item label="邮箱/手机号" label-width="100px">
+                    <el-input
+                      v-model="userRegistry.principal"
+                      placeholder="请输入邮箱或手机号"
+                      style="width: 45%; padding-right: 10px"
+                    />
+                    <el-button :disabled="isBtn" @click="registerVerifyCode">{{ code }}</el-button>
+                  </el-form-item>
+                  <el-form-item label="验证码" label-width="90px">
+                    <el-input
+                      v-model="userRegistry.verifyCode"
+                      placeholder="请输入短信验证码"
+                      style="padding-right: 1px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="密码">
+                    <el-input
+                      v-model="userRegistry.credential"
+                      type="password"
+                      placeholder="请输入密码"
+                      style="padding-right: 1px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="图形验证码" label-width="90px">
+                    <el-image :src="captchaCode" @click="getCaptcha" />
+                    <el-input
+                      v-model="userRegistry.captchaCode"
+                      placeholder="请输入图形验证码"
+                      style="width: 50%; padding-right: 10px"
+                    />
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button
+                      type="primary"
+                      :loading="isLoading"
+                      @click.native="registerBtn"
+                    >注册</el-button>
+                    <el-button type="plain" @click="login">返回登录</el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-card>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { userMixin } from 'assets/js/mixin'
+import LoginBar from 'components/layout/LoginBar'
+
+export default {
+  name: 'Register',
+  components: {
+    LoginBar
+  },
+  mixins: [userMixin],
+  watch: {
+    $route() {
+      this.$router.go()
+    }
+  },
+  created() {
+    document.title = '注册帐号'
+    this.fetchPubkey(2)
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    login() {
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+</style>