Browse Source

调整登录处理逻辑,增加对已登录后,登录失效的处理

chenwen 2 years ago
parent
commit
a1a2ec0a97
6 changed files with 102 additions and 14 deletions
  1. 29 4
      src/api/login.js
  2. 46 3
      src/pages/Home.vue
  3. 12 5
      src/pages/Login.vue
  4. 2 1
      src/store/home.js
  5. 3 0
      src/utils/app.js
  6. 10 1
      src/utils/request.js

+ 29 - 4
src/api/login.js

@@ -1,15 +1,40 @@
 import request from '../utils/request';
-
+import md5 from '../utils/md5.js'
+import app from "../utils/app.js"
+import { useHomeStore } from "../store/home.js"
 
 const api={}
 
+const store=useHomeStore()
 
-api.checkLogin = loginForm => {
-    return request({
+api.checkLogin = async loginForm => {
+	loginForm.pwd=md5(loginForm.pwd)
+    /* return request({
         url: '/login/check',
         method: 'post',
         params: loginForm
-    });
+    }); */
+	try{
+		let resp=await request({
+		    url: '/login/check',
+		    method: 'post',
+		    params: loginForm
+		})
+		
+		if(resp.code===0){
+			app.setToken(resp.data.tokenId)
+			app.putSetting("usName",resp.data.usName)
+			app.putSetting("loginId",loginForm.loginId)
+			store.connStatus=200
+			return Promise.resolve(true)
+		}
+		else{
+			return Promise.reject(resp.msg)
+		}
+	}
+	catch(err){
+		return Promise.reject(err)
+	}
 };
 
 

+ 46 - 3
src/pages/Home.vue

@@ -12,18 +12,21 @@
 				 </el-tab-pane>
 			</el-tabs>
 		</div>
+		
+		
 	</div>
 </template>
 
 <script setup>
-	import { watch,ref,markRaw} from "vue"
+	import { watch,ref,markRaw,h} from "vue"
 	
 	import vHeader from "../components/Header.vue"
 	import vSidetree from "../components/Sidetree.vue"
 	import { storeToRefs } from 'pinia'
 	import { useHomeStore } from "../store/home.js"
-	
-	
+	import app from '../utils/app.js'
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	import loginAPI from "../api/login.js"
    
     const store=useHomeStore()
     const  { collapse ,currentMenu,menuTabs,activeTab} = storeToRefs(store)
@@ -49,6 +52,46 @@
    })
    
    const loadMenuPage=(val)=>import(/* @vite-ignore */`/src/pages/${val}`)
+   
+   
+   
+   watch(
+	  ()=>store.connStatus
+   	 ,(newVal,oldVal)=>{
+   	   if(newVal!=401){
+		   return
+	   }
+	   openRelogin()
+   })
+   
+   const openRelogin=()=>{
+	   return ElMessageBox.prompt('登录已失效,请重新登录',null,{
+   		   showCancelButton:false,
+   		   showInput:true,
+		   inputType:'password',
+		   inputPlaceholder:'请输入密码',
+		   inputPattern:/\S+/,
+		   inputErrorMessage:'密码不能为空',
+		   closeOnClickModal:false,
+		   beforeClose: async (action, instance, done) => {
+			   //console.log(action)
+			   //console.log(instance.inputValue)
+			   instance.confirmButtonLoading = true
+			   try{
+				   let resp=await loginAPI.checkLogin({loginId:app.takeSetting('loginId'),pwd:instance.inputValue})
+				   
+				   done()
+			   }
+			   catch(err){
+				    instance.confirmButtonLoading=false
+					ElMessage.error(err);
+					console.log(err)
+			   }
+			   
+		   }
+		})
+   
+   }
 </script>
 
 <style scoped>

+ 12 - 5
src/pages/Login.vue

@@ -38,8 +38,10 @@ import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import loginAPI from "../api/login.js"
 import app from "../utils/app.js"
-import md5 from '../utils/md5.js'
+import { useHomeStore } from "../store/home.js"
 
+		const store=useHomeStore()
+		
 		const router = useRouter();
         const loginForm = reactive({
             loginId: '',
@@ -58,20 +60,25 @@ import md5 from '../utils/md5.js'
 				if (valid) {
 					isLoading.value=true
 					let {loginId,pwd}=loginForm
-					pwd=md5(pwd)
-					//console.log(pwd+","+loginForm.pwd)
 					loginAPI.checkLogin({loginId,pwd}).then(resp=>{
-						console.log(resp)
+						/* console.log(resp)
 						isLoading.value=false
 						if(resp.code===0){
 							ElMessage.success("登录成功");
-							router.push("/home");
+							
 							//app.putSetting("token",resp.data.tokenId)
 							app.setToken(resp.data.tokenId)
 							app.putSetting("usName",resp.data.usName)
+							app.putSetting("loginId",loginId)
+							store.connStatus=200
+							router.push("/home");
 						}
 						else{
 							ElMessage.error(resp.msg);
+						} */
+						if(resp){
+							ElMessage.success("登录成功");
+							router.push("/home");
 						}
 						
 					}).catch(error=>{

+ 2 - 1
src/store/home.js

@@ -8,7 +8,8 @@ export const useHomeStore = defineStore('home', {
 	  currentTreeNode:null,
 	  currentMenu:null,
 	  menuTabs:[],
-	  activeTab:null
+	  activeTab:null,
+	  connStatus:0
     }
   },
   getters:{},

+ 3 - 0
src/utils/app.js

@@ -5,6 +5,9 @@ export default {
 	setToken:function(token){
 		this.putSetting("token",token)
 	},
+	clearToken:function(){
+		this.setToken(null)
+	},
 	getSetting:function(){
 		let settingstr=localStorage.getItem('$settings'); //不存在时是空串
 		//console.log(settingstr.length);

+ 10 - 1
src/utils/request.js

@@ -1,5 +1,8 @@
 import axios from 'axios';
 import app from './app.js'
+import { useHomeStore } from "../store/home.js"
+
+const store=useHomeStore()
 
 const service = axios.create({
     // process.env.NODE_ENV === 'development' 来判断是否开发环境
@@ -23,8 +26,14 @@ service.interceptors.request.use(
 service.interceptors.response.use(
     response => {
         if (response.status === 200) {
-            return response.data;
+			if(response.data.code==401){
+				app.clearToken()  //清除无效登录信息才能进入登录页面
+				store.connStatus=401
+				return Promise.reject('未登录或登录认证已过期');
+			}
+			return response.data;
         } else {
+			store.connStatus=404
             Promise.reject('远程服务出错');
         }
     },