diff --git a/frontend/src/api/request.js b/frontend/src/api/request.js index 8504f624..3724de17 100644 --- a/frontend/src/api/request.js +++ b/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 }) } diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js index 80685504..8b5c7683 100644 --- a/frontend/src/i18n/zh.js +++ b/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 加星吧' diff --git a/frontend/src/store/modules/user.js b/frontend/src/store/modules/user.js index 0e812134..cc517f8b 100644 --- a/frontend/src/store/modules/user.js +++ b/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 }, // 获取用户信息 diff --git a/frontend/src/utils/request.js b/frontend/src/utils/request.js deleted file mode 100644 index 7217fd63..00000000 --- a/frontend/src/utils/request.js +++ /dev/null @@ -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 diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue index 7dd294b2..9de1d26b 100644 --- a/frontend/src/views/login/index.vue +++ b/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; + }