修改

src/store/modules/user.js

@@ -2,95 +2,95 @@ import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
-  state: {
+    state: {
-    token: getToken(),
+        token: getToken(),
-    name: '',
+        name: '',
-    avatar: '',
+        avatar: '',
-    roles: [],
+        roles: [],
-    permissions: []
+        permissions: []
-  },
+    },
 
-  mutations: {
+    mutations: {
-    SET_TOKEN: (state, token) => {
+        SET_TOKEN: (state, token) => {
-      state.token = token
+            state.token = token
+        },
+        SET_NAME: (state, name) => {
+            state.name = name
+        },
+        SET_AVATAR: (state, avatar) => {
+            state.avatar = avatar
+        },
+        SET_ROLES: (state, roles) => {
+            state.roles = roles
+        },
+        SET_PERMISSIONS: (state, permissions) => {
+            state.permissions = permissions
+        }
     },
-    SET_NAME: (state, name) => {
+
-      state.name = name
+    actions: {
-    },
+        // 登录
-    SET_AVATAR: (state, avatar) => {
+        Login({ commit }, userInfo) {
-      state.avatar = avatar
+            const username = userInfo.username.trim()
-    },
+            const password = userInfo.password
-    SET_ROLES: (state, roles) => {
+            const code = userInfo.code
-      state.roles = roles
+            const uuid = userInfo.uuid
-    },
+            return new Promise((resolve, reject) => {
-    SET_PERMISSIONS: (state, permissions) => {
+                login(username, password, code, uuid).then(res => {
-      state.permissions = permissions
+                    setToken(res.token)
+                    commit('SET_TOKEN', res.token)
+                    resolve()
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
+
+        // 获取用户信息
+        GetInfo({ commit, state }) {
+            return new Promise((resolve, reject) => {
+                getInfo().then(res => {
+                    const user = res.user
+                    const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
+                    if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+                        commit('SET_ROLES', res.roles)
+                        commit('SET_PERMISSIONS', res.permissions)
+                    } else {
+                        commit('SET_ROLES', ['ROLE_DEFAULT'])
+                    }
+                    commit('SET_NAME', user.userName)
+                    commit('SET_AVATAR', avatar)
+                    resolve(res)
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
+
+        // 退出系统
+        LogOut({ commit, state }) {
+            return new Promise((resolve, reject) => {
+                logout(state.token).then(() => {
+                    commit('SET_TOKEN', '')
+                    commit('SET_ROLES', [])
+                    commit('SET_PERMISSIONS', [])
+                    removeToken()
+                    resolve()
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
+
+        // 前端 登出
+        FedLogOut({ commit }) {
+            return new Promise(resolve => {
+                commit('SET_TOKEN', '')
+                removeToken()
+                resolve()
+            })
+        }
     }
-  },
-
-  actions: {
-    // 登录
-    Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
-      const password = userInfo.password
-      const code = userInfo.code
-      const uuid = userInfo.uuid
-      return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
-          setToken(res.token)
-          commit('SET_TOKEN', res.token)
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-
-    // 获取用户信息
-    GetInfo({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        getInfo().then(res => {
-          const user = res.user
-          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
-          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', res.roles)
-            commit('SET_PERMISSIONS', res.permissions)
-          } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
-          }
-          commit('SET_NAME', user.userName)
-          commit('SET_AVATAR', avatar)
-          resolve(res)
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-
-    // 退出系统
-    LogOut({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          commit('SET_PERMISSIONS', [])
-          removeToken()
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
-    },
-
-    // 前端 登出
-    FedLogOut({ commit }) {
-      return new Promise(resolve => {
-        commit('SET_TOKEN', '')
-        removeToken()
-        resolve()
-      })
-    }
-  }
 }
 
-export default user
+export default user

src/utils/request.js

@@ -12,54 +12,54 @@ let downloadLoadingInstance;
 export let isRelogin = { show: false };
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
-// 创建axios实例
+    // 创建axios实例
 const service = axios.create({
-  // axios中请求配置有baseURL选项，表示请求URL公共部分
+    // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: process.env.VUE_APP_BASE_API,
+    baseURL: process.env.VUE_APP_BASE_API,
-  // 超时
+    // 超时
-  timeout: 10000
+    timeout: 10000
 })
 
 // request拦截器
 service.interceptors.request.use(config => {
-  // 是否需要设置 token
+    // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
+    const isToken = (config.headers || {}).isToken === false
-  // 是否需要防止数据重复提交
+        // 是否需要防止数据重复提交
-  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-  if (getToken() && !isToken) {
+    if (getToken() && !isToken) {
-    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-  }
-  // get请求映射params参数
-  if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params);
-    url = url.slice(0, -1);
-    config.params = {};
-    config.url = url;
-  }
-  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-    const requestObj = {
-      url: config.url,
-      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
-      time: new Date().getTime()
     }
-    const sessionObj = cache.session.getJSON('sessionObj')
+    // get请求映射params参数
-    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+    if (config.method === 'get' && config.params) {
-      cache.session.setJSON('sessionObj', requestObj)
+        let url = config.url + '?' + tansParams(config.params);
-    } else {
+        url = url.slice(0, -1);
-      const s_url = sessionObj.url;                  // 请求地址
+        config.params = {};
-      const s_data = sessionObj.data;                // 请求数据
+        config.url = url;
-      const s_time = sessionObj.time;                // 请求时间
-      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
-      } else {
-        cache.session.setJSON('sessionObj', requestObj)
-      }
     }
-  }
+    if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-  return config
+        const requestObj = {
+            url: config.url,
+            data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+            time: new Date().getTime()
+        }
+        const sessionObj = cache.session.getJSON('sessionObj')
+        if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+            cache.session.setJSON('sessionObj', requestObj)
+        } else {
+            const s_url = sessionObj.url; // 请求地址
+            const s_data = sessionObj.data; // 请求数据
+            const s_time = sessionObj.time; // 请求时间
+            const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
+            if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+                const message = '数据正在处理，请勿重复提交';
+                console.warn(`[${s_url}]: ` + message)
+                return Promise.reject(new Error(message))
+            } else {
+                cache.session.setJSON('sessionObj', requestObj)
+            }
+        }
+    }
+    return config
 }, error => {
     console.log(error)
     Promise.reject(error)
@@ -67,92 +67,91 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
-    // 未设置状态码则默认成功状态
+        // 未设置状态码则默认成功状态
-    const code = res.data.code || 200;
+        const code = res.data.code || 200;
-    // 获取错误信息
+        // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
+        const msg = errorCode[code] || res.data.msg || errorCode['default']
-    // 二进制数据则直接返回
+            // 二进制数据则直接返回
-    if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){
+        if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
-      return res.data
+            return res.data
-    }
-    if (code === 401) {
-      if (!isRelogin.show) {
-        isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
-          confirmButtonText: '重新登录',
-          cancelButtonText: '取消',
-          type: 'warning'
         }
-      ).then(() => {
+        if (code === 401) {
-        isRelogin.show = false;
+            if (!isRelogin.show) {
-        store.dispatch('LogOut').then(() => {
+                isRelogin.show = true;
-          location.href = '/index';
+                MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+                    confirmButtonText: '重新登录',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    isRelogin.show = false;
+                    store.dispatch('LogOut').then(() => {
+                        location.href = '/index';
+                    })
+                }).catch(() => {
+                    isRelogin.show = false;
+                });
+            }
+            return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+        } else if (code === 500) {
+            Message({
+                message: msg,
+                type: 'error'
+            })
+            return Promise.reject(new Error(msg))
+        } else if (code === 600) {
+            return Promise.reject(new Error(msg))
+        } else if (code !== 200) {
+            Notification.error({
+                title: msg
+            })
+            return Promise.reject('error')
+        } else {
+            return res.data
+        }
+    },
+    error => {
+        console.log('err' + error)
+        let { message } = error;
+        if (message == "Network Error") {
+            message = "后端接口连接异常";
+        } else if (message.includes("timeout")) {
+            message = "系统接口请求超时";
+        } else if (message.includes("Request failed with status code")) {
+            message = "系统接口" + message.substr(message.length - 3) + "异常";
+        }
+        Message({
+            message: message,
+            type: 'error',
+            duration: 5 * 1000
         })
-      }).catch(() => {
+        return Promise.reject(error)
-        isRelogin.show = false;
-      });
     }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-    } else if (code === 500) {
-      Message({
-        message: msg,
-        type: 'error'
-      })
-      return Promise.reject(new Error(msg))
-    } else if (code !== 200) {
-      Notification.error({
-        title: msg
-      })
-      return Promise.reject('error')
-    } else {
-      return res.data
-    }
-  },
-  error => {
-    console.log('err' + error)
-    let { message } = error;
-    if (message == "Network Error") {
-      message = "后端接口连接异常";
-    }
-    else if (message.includes("timeout")) {
-      message = "系统接口请求超时";
-    }
-    else if (message.includes("Request failed with status code")) {
-      message = "系统接口" + message.substr(message.length - 3) + "异常";
-    }
-    Message({
-      message: message,
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(error)
-  }
 )
 
 // 通用下载方法
 export function download(url, params, filename) {
-  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+    downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
-  return service.post(url, params, {
+    return service.post(url, params, {
-    transformRequest: [(params) => { return tansParams(params) }],
+        transformRequest: [(params) => { return tansParams(params) }],
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    responseType: 'blob'
+        responseType: 'blob'
-  }).then(async (data) => {
+    }).then(async(data) => {
-    const isLogin = await blobValidate(data);
+        const isLogin = await blobValidate(data);
-    if (isLogin) {
+        if (isLogin) {
-      const blob = new Blob([data])
+            const blob = new Blob([data])
-      saveAs(blob, filename)
+            saveAs(blob, filename)
-    } else {
+        } else {
-      const resText = await data.text();
+            const resText = await data.text();
-      const rspObj = JSON.parse(resText);
+            const rspObj = JSON.parse(resText);
-      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+            const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-      Message.error(errMsg);
+            Message.error(errMsg);
-    }
+        }
-    downloadLoadingInstance.close();
+        downloadLoadingInstance.close();
-  }).catch((r) => {
+    }).catch((r) => {
-    console.error(r)
+        console.error(r)
-    Message.error('下载文件出现错误，请联系管理员！')
+        Message.error('下载文件出现错误，请联系管理员！')
-    downloadLoadingInstance.close();
+        downloadLoadingInstance.close();
-  })
+    })
 }
 
-export default service
+export default service

src/views/login.vue

@@ -13,7 +13,7 @@
           type="text"
           auto-complete="off"
           placeholder="账号"
-          style="width: 310px;"
+          style="width: 310px"
         >
           <svg-icon
             slot="prefix"
@@ -68,7 +68,7 @@
           style="
             width: 300px;
             height: 50px;
-            background-image: linear-gradient(to right, #01A4FF, #1259EE );
+            background-image: linear-gradient(to right, #01a4ff, #1259ee);
             border-radius: -33px;
             border: none;
             color: #ffffff;
@@ -86,11 +86,11 @@
         </div>
       </el-form-item>
     </el-form>
-     <div class="bg" style="border-radius: 0 6px 6px 0; padding: 0">
+    <div class="bg" style="border-radius: 0 6px 6px 0; padding: 0">
       <img
         src="../assets/images/bg3.png"
         alt=""
-        style="width: 1400px; height: 700px; border-radius: 0 6px 6px 0;"
+        style="width: 1400px; height: 700px; border-radius: 0 6px 6px 0"
       />
     </div>
     <!--  底部  -->
@@ -103,7 +103,7 @@
 <script>
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
@@ -115,23 +115,23 @@ export default {
         password: "admin123",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
       captchaOnOff: true,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
     };
   },
   watch: {
@@ -139,8 +139,8 @@ export default {
       handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
+      immediate: true,
-    }
+    },
   },
   created() {
     this.getCode();
@@ -148,8 +148,9 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
+      getCodeImg().then((res) => {
-        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
+        this.captchaOnOff =
+          res.captchaOnOff === undefined ? true : res.captchaOnOff;
         if (this.captchaOnOff) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -159,44 +160,55 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
+        password:
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
+          this.$store
-            this.$router.push({ path: this.redirect || "/" }).catch(() => { });
+            .dispatch("Login", this.loginForm)
-          }).catch(() => {
+            .then(() => {
-            this.loading = false;
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
-            if (this.captchaOnOff) {
+              setTimeout(() => {
-              this.getCode();
+                this.loading = false;
-            }
+              }, 1500);
-          });
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaOnOff) {
+                this.getCode();
+              }
+            });
         }
       });
-    }
+    },
-  }
+  },
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.bg{
+.bg {
-  position:absolute;
+  position: absolute;
 }
 // .el-input el-input--medium el-input--prefix{
 //    height: 50px;
@@ -205,12 +217,12 @@ export default {
 //     border: none;
 //   border-radius: 10px;
 // }
-.el-input--medium ::v-deep .el-input__inner{
+.el-input--medium ::v-deep .el-input__inner {
-    height: 50px;
+  height: 50px;
-    line-height: 36px;
+  line-height: 36px;
-    // background-color: red;
+  // background-color: red;
-    border: none;
+  border: none;
-    border: 1px solid #E5E5E5;
+  border: 1px solid #e5e5e5;
   border-radius: 36px;
 }
 .login {
@@ -234,7 +246,7 @@ export default {
   width: 400px;
   padding: 25px 25px 5px 25px;
   z-index: 999;
-    margin-right: 50%;
+  margin-right: 50%;
   .el-input {
     height: 38px;
     input {
@@ -244,7 +256,7 @@ export default {
   .input-icon {
     height: 39px;
     width: 14px;
-     margin-left: 5px;
+    margin-left: 5px;
     margin-top: 5px;
   }
 }
@@ -277,7 +289,7 @@ export default {
 }
 .login-code-img {
   height: 38px;
-   margin-top: 5px;
+  margin-top: 5px;
 }
 // .el-button{
 //    background-image: linear-gradient(to right , #90C8DF, #4CA8CD);