feat(sys-client): add sign up page;

maslow · Sep 6, 2021 · 8222387 · 8222387
1 parent 3d03adb
commit 8222387
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 149 deletions.
diff --git a/packages/system-client/src/permission.js b/packages/system-client/src/permission.js
@@ -9,7 +9,7 @@ import { Message } from 'element-ui'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login'] // no redirect whitelist
+const whiteList = ['/login', '/sign-up'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar
@@ -20,7 +20,6 @@ router.beforeEach(async(to, from, next) => {
 
   // determine whether the user has logged in
   const hasToken = getToken()
-
   if (hasToken) {
     if (!store.state.user.name) {
       store.dispatch('user/getInfo')
@@ -65,6 +64,8 @@ router.beforeEach(async(to, from, next) => {
   } else {
     /* has no token*/
     if (whiteList.indexOf(to.path) !== -1) {
+      console.log('no token', to)
+
       // in the free login whitelist, go directly
       next()
     } else {

diff --git a/packages/system-client/src/router/constants.js b/packages/system-client/src/router/constants.js
@@ -23,7 +23,7 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '/signup',
+    path: '/sign-up',
     component: () => import('@/views/account/sign-up'),
     hidden: true
   },

diff --git a/packages/system-client/src/store/modules/user.js b/packages/system-client/src/store/modules/user.js
@@ -1,6 +1,7 @@
 import { login, getInfo } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import { resetRouter } from '@/router'
+import { Message } from 'element-ui'
 
 const state = {
   token: getToken(),
@@ -22,47 +23,38 @@ const mutations = {
 
 const actions = {
   // user login
-  login({ commit }, userInfo) {
+  async login({ commit }, userInfo) {
     const { username, password } = userInfo
-    return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
-        const { data } = response
-        commit('SET_TOKEN', data.access_token)
-        setToken(data.access_token, data.expire)
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
-    })
+    const res = await login({ username: username.trim(), password: password })
+    const { data } = res
+    if (res.error) {
+      console.log(res)
+      Message.error(res.error)
+      return
+    }
+    commit('SET_TOKEN', data.access_token)
+    setToken(data.access_token, data.expire)
   },
 
   // get user info
-  getInfo({ commit }) {
-    return new Promise((resolve, reject) => {
-      getInfo().then(response => {
-        const { data } = response
-
-        if (!data) {
-          reject('Verification failed, please Login again.')
-        }
-
-        const account = data
-
-        commit('SET_NAME', account.name || account.username)
-        commit('SET_AVATAR', account.avatar)
-
-        resolve(data)
-      }).catch(error => {
-        reject(error)
-      })
-    })
+  async getInfo({ commit, dispatch }) {
+    const res = await getInfo()
+    const { data } = res
+    if (!data) {
+      return dispatch('/user/logout')
+    }
+    const account = data
+    commit('SET_NAME', account.name || account.username)
+    commit('SET_AVATAR', account.avatar)
+    return data
   },
 
   // user logout
   logout({ commit, state, dispatch }) {
     return new Promise((resolve, reject) => {
       commit('SET_TOKEN', '')
-
+      commit('SET_NAME', '')
+      commit('SET_AVATAR', '')
       removeToken()
       resetRouter()
 

diff --git a/packages/system-client/src/views/account/sign-in.vue b/packages/system-client/src/views/account/sign-in.vue
@@ -58,12 +58,20 @@
         </el-form-item>
       </el-tooltip>
 
-      <el-button
-        :loading="loading"
-        type="primary"
-        style="width:100%;margin-bottom:30px;"
-        @click.native.prevent="handleLogin"
-      >登陆</el-button>
+      <div class="btn-row">
+        <el-button
+          :loading="loading"
+          type="primary"
+          style="width:80%;margin-bottom:30px;font-weight: bold;"
+          @click.native.prevent="handleLogin"
+        >登陆</el-button>
+
+        <el-button
+          type="text"
+          style="width:20%;margin-bottom:30px;color: white; font-weight: bold;"
+          @click="toSignUp"
+        >去注册？</el-button>
+      </div>
     </el-form>
 
   </div>
@@ -153,26 +161,27 @@ export default {
     },
     handleLogin() {
       this.$refs.loginForm.validate(async valid => {
-        if (valid) {
-          this.loading = true
-          this.$store
-            .dispatch('user/login', this.loginForm)
-            .then(async() => {
-              await this.$store.dispatch('user/getInfo')
-              this.$router.push({
-                path: this.redirect || '/',
-                query: this.otherQuery
-              })
-              this.loading = false
-            })
-            .catch(error => {
-              console.error(error)
-              this.loading = false
-            })
-        } else {
+        if (!valid) {
           console.log('error submit!!')
-          return false
+          return this.$message.error('请输入正确的账户密码')
         }
+
+        this.loading = true
+        await this.$store
+          .dispatch('user/login', this.loginForm)
+          .catch((err) => { console.error(err) })
+          .finally(() => { this.loading = false })
+
+        this.$router.push({
+          path: this.redirect || '/',
+          query: this.otherQuery
+        })
+        this.loading = false
+      })
+    },
+    toSignUp() {
+      this.$router.push({
+        path: '/sign-up'
       })
     },
     getOtherQuery(query) {
@@ -183,24 +192,6 @@ export default {
         return acc
       }, {})
     }
-    // afterQRScan() {
-    //   if (e.key === 'x-admin-oauth-code') {
-    //     const code = getQueryObject(e.newValue)
-    //     const codeMap = {
-    //       wechat: 'code',
-    //       tencent: 'code'
-    //     }
-    //     const type = codeMap[this.auth_type]
-    //     const codeName = code[type]
-    //     if (codeName) {
-    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
-    //         this.$router.push({ path: this.redirect || '/' })
-    //       })
-    //     } else {
-    //       alert('第三方登录失败')
-    //     }
-    //   }
-    // }
   }
 }
 </script>
@@ -249,6 +240,10 @@ $cursor: #fff;
     border-radius: 5px;
     color: #454545;
   }
+  .btn-row {
+    display: flex;
+    justify-content: space-between;
+  }
 }
 </style>