完善登录认证，为认证的无法直接进入主页

src/api/header.js

@@ -32,5 +32,13 @@ api.processMenus=(menus)=>{
 	return pMenuList
 }
 
+api.logout=(tokenId)=>{
+	return request({
+	    url: '/login/exit',
+	    method: 'post',
+		params:{tokenId}
+	});
+}
+
 export  default api
 

src/components/Header.vue

@@ -33,16 +33,21 @@
                 </div>
                
                 <!-- 用户名下拉菜单 -->
-                <el-dropdown class="user-name" trigger="click">
-                    <span class="el-dropdown-link">
-                        {{username}}
-                       <el-icon  color="#ffffff" :size="16"><CaretBottom/></el-icon>
-                    </span>
+                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+					<div>
+						<el-tooltip effect="dark" :content="app.takeSetting('usName')">
+							<div class="el-dropdown-link">
+								{{app.takeSetting("usName")}}
+							</div>
+						</el-tooltip>
+						<el-icon  color="#ffffff" :size="16"><CaretBottom/></el-icon>
+					</div>
+                    
                     <template #dropdown>
                         <el-dropdown-menu>
                             
-                           <el-dropdown-item>Action 1</el-dropdown-item>
-						   <el-dropdown-item>Action 2</el-dropdown-item>
+                           <el-dropdown-item command="modifypwd">修改密码</el-dropdown-item>
+						   <el-dropdown-item command="logout">退出系统</el-dropdown-item>
                         </el-dropdown-menu>
                     </template>
                 </el-dropdown>
@@ -57,6 +62,7 @@
 	import { useRouter } from "vue-router"
 	import headerAPI from "../api/header.js"
 	import navmenuItem from "./NavmenuItem.vue"
+	import app from "../utils/app.js"
 	
 	const store=useHomeStore()
 	
@@ -84,27 +90,25 @@
 	
 	
 	
-	const username=ref('测试用户')
 	
-	const message=ref(2)
 	
-	//const store = useStore();
+	const message=ref(2)
 	
-	//const collapse = computed(() => store.state.collapse);
 	const  { collapse } = storeToRefs(store)
 	
 	const collapseChage = () => {
-	   //store.commit("handleCollapse", !collapse.value);
-	   collapse.value=!collapse.value
+	  collapse.value=!collapse.value
 	};
 	
 	// 用户名下拉菜单选择事件
 	const router = useRouter();
 	const handleCommand = (command) => {
-	    if (command == "loginout") {
-	        localStorage.removeItem("ms_username");
-	        router.push("/login");
-	    } else if (command == "user") {
+	    if (command == "logout") {
+			headerAPI.logout(app.takeSetting('token'))
+			app.clearSetting()
+			router.push("/login")
+			
+	    } else if (command == "modifypwd") {
 	        router.push("/user");
 	    }
 	};
@@ -148,7 +152,7 @@
 	
 	
 	line-height: 60px;
-	width:calc(100vw - 402px);
+	width:calc(100vw - 422px);
 }
 .header .nav-menu:deep(.el-menu--horizontal){
 	border:none;
@@ -163,7 +167,7 @@
 
 .header-right {
     float: right;
-    padding-right: 20px;
+    padding-right: 5px;
 	
 }
 .header-user-con {
@@ -200,12 +204,17 @@
 }
 .user-name {
     margin-left: 10px;
-	width:80px;
+	
 }
 
 .el-dropdown-link {
     color: #fff;
     cursor: pointer;
+	max-width:95px;
+	overflow: hidden;
+	text-overflow:ellipsis;
+	white-space: nowrap;
+	display: inline-block;
 }
 .el-dropdown-menu__item {
     text-align: center;

src/pages/Login.vue

@@ -66,7 +66,9 @@ import md5 from '../utils/md5.js'
 						if(resp.code===0){
 							ElMessage.success("登录成功");
 							router.push("/home");
-							app.putSetting("token",resp.data.tokenId)
+							//app.putSetting("token",resp.data.tokenId)
+							app.setToken(resp.data.tokenId)
+							app.putSetting("usName",resp.data.usName)
 						}
 						else{
 							ElMessage.error(resp.msg);

src/router/index.js

@@ -1,16 +1,24 @@
 import {createRouter, createWebHashHistory} from "vue-router";
+import app from "../utils/app.js"
 
 const routes = [
     {
         path: '/',
-       // redirect: '/login'
-	   component: () => import ("../pages/Login.vue")
+        redirect: '/home'
+	   //component: () => import ("../pages/Login.vue")
     }, 
 	{
 	    path: "/home",
 	    name: "Home",
 		component: () => import ("../pages/Home.vue"),
-		
+		beforeEnter:(to,from)=>{
+			if(!app.getToken()){
+				return {name:'Login'}
+			}
+			else{
+				return true
+			}
+		}
 		
 	},
 	{

src/utils/app.js

@@ -1,13 +1,18 @@
 export default {
-	
+	getToken:function(){
+		return this.takeSetting("token")
+	},
+	setToken:function(token){
+		this.putSetting("token",token)
+	},
 	getSetting:function(){
-		let settingstr=sessionStorage.getItem('$settings'); //不存在时是空串
+		let settingstr=localStorage.getItem('$settings'); //不存在时是空串
 		//console.log(settingstr.length);
 		return settingstr?JSON.parse(settingstr):null;
 	},
 	setSetting:function(setting){
 		setting = setting || {};
-		sessionStorage.setItem('$settings', JSON.stringify(setting));
+		localStorage.setItem('$settings', JSON.stringify(setting));
 	},
 	addSetting:function(setting){
 		let settingObj=this.getSetting()||{};
@@ -24,7 +29,7 @@ export default {
 		return setting[key];
 	},
 	clearSetting:function(){
-		uni.clear();
+		localStorage.clear()
 	},
 	extend:function(srcObj,refObj){
 		for(let attr in refObj){

src/utils/request.js

@@ -11,7 +11,7 @@ const service = axios.create({
 
 service.interceptors.request.use(
     config => {
-		config.headers.token=app.takeSetting("token")
+		config.headers.token=app.getToken()
         return config;
     },
     error => {