细化登录错误信息

frontend/src/api/request.js

@@ -33,16 +33,19 @@ const request = (method, path, params, data, others = {}) => {
     return Promise.reject(response)
   }).catch((e) => {
     let response = e.response
+    if (!response) {
+      return e
+    }
     if (response.status === 400) {
       Message.error(response.data.error)
     }
     if (response.status === 401 && router.currentRoute.path !== '/login') {
-      console.log('login')
       router.push('/login')
     }
     if (response.status === 500) {
       Message.error(response.data.error)
     }
+    return e
   })
 }
 

frontend/src/i18n/zh.js

@@ -610,6 +610,7 @@ docker run -d --restart always --name crawlab_worker \\
   'Please enter your email': '请输入您的邮箱',
   'Please enter your Wechat account': '请输入您的微信账号',
   'Please enter your feedback content': '请输入您的反馈内容',
+  'No response from the server. Please make sure your server is running correctly. You can also refer to the documentation to solve this issue.': '服务器无响应，请保证您的服务器正常运行。您也可以参考文档来解决这个问题（文档链接在下方）',
 
   // 其他
   'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'

frontend/src/store/modules/user.js

@@ -71,20 +71,16 @@ const user = {
 
   actions: {
     // 登录
-    login ({ commit }, userInfo) {
+    async login ({ commit }, userInfo) {
       const username = userInfo.username.trim()
-      return new Promise((resolve, reject) => {
-        request.post('/login', { username, password: userInfo.password })
-          .then(response => {
-            const token = response.data.data
-            commit('SET_TOKEN', token)
-            window.localStorage.setItem('token', token)
-            resolve()
-          })
-          .catch(error => {
-            reject(error)
-          })
-      })
+      let res
+      res = await request.post('/login', { username, password: userInfo.password })
+      if (res.status === 200) {
+        const token = res.data.data
+        commit('SET_TOKEN', token)
+        window.localStorage.setItem('token', token)
+      }
+      return res
     },
 
     // 获取用户信息

frontend/src/utils/request.js

@@ -1,73 +0,0 @@
-import axios from 'axios'
-import { Message, MessageBox } from 'element-ui'
-import store from '../store'
-import { getToken } from '@/utils/auth'
-
-// 创建axios实例
-const service = axios.create({
-  baseURL: process.env.BASE_API, // api 的 base_url
-  timeout: 5000 // 请求超时时间
-})
-
-// request拦截器
-service.interceptors.request.use(
-  config => {
-    if (store.getters.token) {
-      config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-    }
-    return config
-  },
-  error => {
-    // Do something with request error
-    console.log(error) // for debug
-    Promise.reject(error)
-  }
-)
-
-// response 拦截器
-service.interceptors.response.use(
-  response => {
-    /**
-     * code为非20000是抛错 可结合自己业务进行修改
-     */
-    const res = response.data
-    if (res.code !== 20000) {
-      Message({
-        message: res.message,
-        type: 'error',
-        duration: 5 * 1000
-      })
-
-      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
-          })
-        })
-      }
-      return Promise.reject(new Error('error'))
-    } else {
-      return response.data
-    }
-  },
-  error => {
-    console.log('err' + error) // for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(error)
-  }
-)
-
-export default service

frontend/src/views/login/index.vue

@@ -150,20 +150,41 @@ export default {
   },
   methods: {
     handleLogin () {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          this.$store.dispatch('user/login', this.loginForm).then(() => {
-            this.loading = false
-            this.$router.push({ path: this.redirect || '/' })
-            this.$store.dispatch('user/getInfo')
-            this.$st.sendEv('全局', '登录', '成功')
-          }).catch(() => {
-            this.$message.error(this.$t('Error when logging in (Please read documentation Q&A)'))
-            this.loading = false
-            this.$st.sendEv('全局', '登录', '失败')
+      this.$refs.loginForm.validate(async valid => {
+        if (!valid) return
+        this.loading = true
+        const res = await this.$store.dispatch('user/login', this.loginForm)
+        if (res.status === 200) {
+          // success
+          this.$router.push({ path: this.redirect || '/' })
+          this.$st.sendEv('全局', '登录', '成功')
+          await this.$store.dispatch('user/getInfo')
+        } else if (res.message === 'Network Error' || !res.response) {
+          // no response
+          this.$message({
+            type: 'error',
+            message: this.$t('No response from the server. Please make sure your server is running correctly. You can also refer to the documentation to solve this issue.'),
+            customClass: 'message-error',
+            duration: 5000
           })
+          this.$st.sendEv('全局', '登录', '服务器无响应')
+        } else if (res.response.status === 401) {
+          // incorrect username or password
+          this.$message({
+            type: 'error',
+            message: '[401] ' + this.$t('Incorrect username or password')
+          })
+          this.$st.sendEv('全局', '登录', '用户名密码错误')
+        } else {
+          // other error
+          this.$message({
+            type: 'error',
+            message: `[${res.response.status}] ${res.response.data.error}`,
+            customClass: 'message-error'
+          })
+          this.$st.sendEv('全局', '登录', '其他错误')
         }
+        this.loading = false
       })
     },
     handleSignup () {
@@ -367,6 +388,11 @@ const initCanvas = () => {
       left: 0;
     }
   }
+
+  .message-error .el-message__content {
+    width: 360px;
+    line-height: 18px;
+  }
 </style>
 
 <style rel="stylesheet/scss" lang="scss" scoped>