登录和刷新token0617

src/axios/filter.js

@@ -43,13 +43,19 @@ axios.defaults.headers.common['Authorization'] = ""; //请求token信息配置
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //请求type设置
 axios.defaults.timeout = 30000; //在超时前，所有请求都会等待30秒
 axios.defaults.withCredentials = true;
+let isInvalid1 = false //用于控制登录信息过期后弹窗时间的截流，截流时间为5s
+let isInvalid2 = false
 
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {
     // 在发送请求之前处理
     // 判断token在前台session中是否存在
     config.headers.common['Authorization'] = localStorage.getItem('Authorization');
-    showFullScreenLoading();
+    if(config.noLoading===true){   //如果noLoading为true，不加载loading画面
+
+    }else{
+        showFullScreenLoading();
+    }
     return config;
 }, function (error) {
     // 对请求错误做处理
@@ -72,17 +78,29 @@ axios.interceptors.response.use(function (response) {
     return response;
 }, function (error) {
     tryHideFullScreenLoading();
-    console.log('网络异常');
-    ElementUI.Message.error("网络异常");
-    return Promise.reject(error);
+    //console.log(error)
+    if(error.response.data.error == 'invalid_token'){  //token失效，弹框提示确认返回login
+        //ElementUI.Message.error("用户信息过期，请重新登录");
+        if(isInvalid1 == false){
+            isInvalid1 = true
+            ElementUI.MessageBox.alert('用户信息过期，请重新登陆','提示',{
+                confirmButtonText:'确定',
+                callback: action => {
+                    let loginUrl = window.location.origin + '/login'
+                    window.location.href = loginUrl
+                }
+            })
+            setTimeout(()=>{isInvalid1 = false}, 5000)
+        }
+        return Promise.reject(error);
+    }else{
+        ElementUI.Message.error("网络异常");
+        return Promise.reject(error);
+    }
 });
 
 Vue.prototype.$axios = axios; //定义调用方式
 
-
-
-
-
 // 针对上传大文件
 const instance = axios.create({
     baseURL: '',
@@ -121,9 +139,26 @@ instance.interceptors.response.use(function (response) {
 }, function (error) {
     tryHideFullScreenLoading();
     console.log('网络异常');
-    ElementUI.Message.error("网络异常");
-    return Promise.reject(error);
+    if(error.response.data.error == 'invalid_token'){  //token失效，弹框提示确认返回login
+        if(isInvalid2 == false){
+            isInvalid2 = true
+            ElementUI.MessageBox.alert('用户信息过期，请重新登陆','提示',{
+                confirmButtonText:'确定',
+                callback: action => {
+                    let loginUrl = window.location.origin + '/login'
+                    window.location.href = loginUrl
+                }
+            })
+            setTimeout(()=>{isInvalid2 = false}, 5000)
+        }
+        return Promise.reject(error);
+    }else{
+        ElementUI.Message.error("网络异常");
+        return Promise.reject(error);
+    }
 });
 
 Vue.use(VueAxios, instance);
-Vue.prototype.$instance = instance; //定义调用方式
+Vue.prototype.$instance = instance; //定义调用方式
+
+//针对不需要loading画面的实例

src/views/login.vue

@@ -85,7 +85,11 @@ export default {
                             let toExpiresTime =
                                 new Date(expiresTime).getTime() -
                                 new Date().getTime();
-
+                            if (toExpiresTime < 5*60 * 1000) {
+                                this.getRefreshToken()
+                            }else{
+                                this.$router.push({ path: "/mainPage" });
+                            }
                             // 过期时间前60秒即可发送获取新的token
                             /*if (toExpiresTime > 60 * 1000) {
                                 tokenTimer = setTimeout(() => {
@@ -98,7 +102,6 @@ export default {
                             }
 
                             this.$message.success("登录成功");*/
-                            this.$router.push({ path: "/mainPage" });
                         } else {
                             this.$message.error(res.message || "登录失败");
                         }
@@ -124,11 +127,12 @@ export default {
                     localStorage.setItem("refreshToken", refreshToken);
                     localStorage.setItem("expiresTime", expiresTime);
 
-                    let tokenTimer = null;
+                    this.$router.push({ path: "/mainPage" });
+                    /*let tokenTimer = null;
                     let toExpiresTime =
                         new Date(expiresTime).getTime() - new Date().getTime();
 
-                    /*if (toExpiresTime > 60 * 1000) {
+                    if (toExpiresTime > 60 * 1000) {
                         tokenTimer = setTimeout(() => {
                             this.i++;
                             if (this.i >= 10) {

src/views/page/pageMenu.vue

@@ -126,7 +126,7 @@
                             >手动运行项目</el-menu-item
                         >
                     </el-submenu>
-                    <!--<el-submenu index="systemManagement">
+                    <el-submenu index="systemManagement">
                         <template slot="title">
                             <i class="my-icon-menuF"></i>
                             <span>系统管理</span>
@@ -138,8 +138,8 @@
                             >参数管理</el-menu-item
                         >    
                         <el-menu-item index="clusteringManagement"
-                        >集群管理</el-menu-item>
-                    </el-submenu>-->
+                            >集群管理</el-menu-item>
+                    </el-submenu>
                 </el-menu>
             </div>
         </div>
@@ -178,17 +178,21 @@ export default {
             this.$refs.menu.open(menuKind);
         }
 
-        //设置一个定时器定时查看过期时间，如果距离过期时间小于5min，则发送refreshToken
-        /*
+        //设置一个定时器，定时在距离过期前5min，这个定时器会发送refreshToken请求
+        
         this.expiresTime = localStorage.getItem('expiresTime')
         this.toExpiresTime = new Date(this.expiresTime).getTime() - new Date().getTime();
+        console.log(this.toExpiresTime)
+        let that = this;
         if(this.toExpiresTime < 5*60*1000){
             this.refreshToken()
         }else{
-            setInterval(function(){
-                let that = this;
-                that.checkExpiresTime()
-            }, 5*60*1000)
+            this.tokenTimer = setTimeout(function(){
+                that.refreshToken()
+            }, this.toExpiresTime - 5*60*1000)
+        }
+        /*if(this.expiresTime && this.toExpiresTime > 0){
+            
         }*/
     },
     methods: {
@@ -221,6 +225,7 @@ export default {
             this.$axios({
                 method: "post",
                 url: this.$api.common.refreshToken,
+                noLoading: true,
                 data: {
                     refreshToken: localStorage.getItem("refreshToken"),
                 },
@@ -233,8 +238,33 @@ export default {
                     localStorage.setItem("Authorization", Authorization);
                     localStorage.setItem("refreshToken", refreshToken);
                     localStorage.setItem("expiresTime", expiresTime);
+                    
                     this.expiresTime = expiresTime
                     this.toExpiresTime = new Date(this.expiresTime).getTime() - new Date().getTime();
+                    clearTimeout(this.tokenTimer)
+                    if(this.toExpiresTime < 5*60*1000){
+                        //this.refreshToken()
+                    }else{
+                        this.tokenTimer = setTimeout(function(){
+                            let that = this;
+                            that.refreshToken()
+                        }, this.toExpiresTime - 5*60*1000)
+                    }
+                    /*if(this.expiresTime && this.toExpiresTime > 0){
+                        if(this.toExpiresTime < 5*60*1000){
+                            //this.refreshToken()
+                        }else{
+                            this.tokenTimer = setTimeout(function(){
+                                let that = this;
+                                that.refreshToken()
+                            }, this.toExpiresTime - 5*60*1000)
+                        }
+                    }*/
+                }else{
+                    if(res.code == 400){  //refreshToken请求返回400则跳回登录页
+                        let loginUrl = window.location.origin + '/login'
+                        window.location.href = loginUrl
+                    }
                 }
             })
         }