接入退出登录接口、查看登录时效接口、 添加路由守卫自动登录功能

src/assets/sass/_app.scss

@@ -2,4 +2,8 @@
     background-repeat: no-repeat;
     background-attachment: fixed;
     @apply py-5;
-}
+}
+
+.CursorPointer {
+    cursor: pointer;
+  }

src/components/TopBar.vue

@@ -51,13 +51,13 @@
             </a>
           </div>
           <div class="p-2 border-t border-theme-40">
-            <a
-              href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
+            <span
+              @click="getExit"
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md CursorPointer"
             >
               <ToggleRightIcon class="w-4 h-4 mr-2" />
              退出登陆
-            </a>
+            </span>
           </div>
         </div>
       </div>
@@ -211,6 +211,7 @@
 </template>
 
 <script>
+import { apost } from '../utils/api/login'
 export default {
   data() {
     return {
@@ -223,7 +224,17 @@ export default {
     },
     hideSearchDropdown() {
       this.searchDropdown = false;
-    }
+    },
+
+    // 退出登录
+    getExit: function(){
+      apost("/api/sign/out").then((res) => {
+        console.log(res);
+      });
+
+
+        this.$router.push('/')
+    },
   }
 };
 </script>

src/modules/Crad.vue

@@ -48,6 +48,31 @@ export default {
 </script>
 
 <style scoped>
+/* pc */
+@media screen and (max-width: 1172px) {
+  .card_body {
+    min-width: 47.2% !important;
+  }
+  .itemBoxB {
+      width: 100% !important;
+      margin-left: 0 !important;
+      padding: 24px !important;
+      display: block !important;
+      float: none !important;
+  }
+}
+
+@media screen and (max-width: 690px) {
+  .card_body {
+    width: 100% !important;
+    display: block !important;
+    float: none !important;
+    padding-right: 54px !important;
+    border-radius: 0 !important;
+    min-width: 420px !important;
+  }
+}
+
 .card_body {
   float: left;
   width: 31.2%;

src/router/index.js

@@ -1,5 +1,7 @@
 import Vue from 'vue';
+import { FastForwardIcon } from 'vue-feather-icons';
 import VueRouter from 'vue-router';
+import { apost } from '../utils/api/login'
 
 Vue.use(VueRouter);
 
@@ -17,168 +19,168 @@ const routes = [
 			{
 				path: '/Dashboard',
 				name: 'side-menu-dashboard',
-				meta: {title: '会员中心'},
+				meta: { title: '会员中心' },
 				component: () => import('@/views/Dashboard')
 			},
 			{
 				path: 'inbox',
 				name: 'side-menu-inbox',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Inbox')
 			},
 			{
 				path: 'file-manager',
 				name: 'side-menu-file-manager',
-				meta: {title: '文件管理'},
+				meta: { title: '文件管理' },
 				component: () => import('@/views/FileManager')
 			},
 			{
 				path: 'point-of-sale',
 				name: 'side-menu-point-of-sale',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/PointOfSale')
 			},
 			{
 				path: 'chat',
 				name: 'side-menu-chat',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Chat')
 			},
 			{
 				path: 'post',
 				name: 'side-menu-post',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Post')
 			},
 			{
 				path: 'crud-data-list',
 				name: 'side-menu-crud-data-list',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/CrudDataList')
 			},
 			{
 				path: 'crud-form',
 				name: 'side-menu-crud-form',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/CrudForm')
 			},
 			{
 				path: 'users-layout-1',
 				name: 'side-menu-users-layout-1',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/UsersLayout1')
 			},
 			{
 				path: 'users-layout-2',
 				name: 'side-menu-users-layout-2',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/UsersLayout2')
 			},
 			{
 				path: 'users-layout-3',
 				name: 'side-menu-users-layout-3',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/UsersLayout3')
 			},
 			{
 				path: 'profile-overview-1',
 				name: 'side-menu-profile-overview-1',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/ProfileOverview1')
 			},
 			{
 				path: 'profile-overview-2',
 				name: 'side-menu-profile-overview-2',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/ProfileOverview2')
 			},
 			{
-        path: 'profile-overview-3',
-        name: 'side-menu-profile-overview-3',
-        component: () => import('@/views/ProfileOverview3')
+				path: 'profile-overview-3',
+				name: 'side-menu-profile-overview-3',
+				component: () => import('@/views/ProfileOverview3')
 			},
 			{
 				path: 'wizard-layout-1',
 				name: 'side-menu-wizard-layout-1',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/WizardLayout1')
 			},
 			{
 				path: 'wizard-layout-2',
 				name: 'side-menu-wizard-layout-2',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/WizardLayout2')
 			},
 			{
 				path: 'wizard-layout-3',
 				name: 'side-menu-wizard-layout-3',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/WizardLayout3')
 			},
 			{
 				path: 'blog-layout-1',
 				name: 'side-menu-blog-layout-1',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/BlogLayout1')
 			},
 			{
 				path: 'blog-layout-2',
 				name: 'side-menu-blog-layout-2',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/BlogLayout2')
 			},
 			{
 				path: 'blog-layout-3',
 				name: 'side-menu-blog-layout-3',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/BlogLayout3')
 			},
 			{
 				path: 'pricing-layout-1',
 				name: 'side-menu-pricing-layout-1',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/PricingLayout1')
 			},
 			{
 				path: 'pricing-layout-2',
 				name: 'side-menu-pricing-layout-2',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/PricingLayout2')
 			},
 			{
 				path: 'invoice-layout-1',
 				name: 'side-menu-invoice-layout-1',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/InvoiceLayout1')
 			},
 			{
 				path: 'invoice-layout-2',
 				name: 'side-menu-invoice-layout-2',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/InvoiceLayout2')
 			},
 			{
 				path: 'faq-layout-1',
 				name: 'side-menu-faq-layout-1',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/FaqLayout1')
 			},
 			{
 				path: 'faq-layout-2',
 				name: 'side-menu-faq-layout-2',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/FaqLayout2')
 			},
 			{
 				path: 'faq-layout-3',
 				name: 'side-menu-faq-layout-3',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/FaqLayout3')
 			},
 			{
 				path: 'update-profile',
 				name: 'side-menu-update-profile',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/UpdateProfile')
 			},
 			{
@@ -189,157 +191,157 @@ const routes = [
 			{
 				path: 'regular-table',
 				name: 'side-menu-regular-table',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/RegularTable')
 			},
 			{
 				path: 'tabulator',
 				name: 'side-menu-tabulator',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Tabulator')
 			},
 			{
 				path: 'accordion',
 				name: 'side-menu-accordion',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Accordion')
 			},
 			{
 				path: 'button',
 				name: 'side-menu-button',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Button')
 			},
 			{
 				path: 'modal',
 				name: 'side-menu-modal',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Modal')
 			},
 			{
 				path: 'alert',
 				name: 'side-menu-alert',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Alert')
 			},
 			{
 				path: 'progress-bar',
 				name: 'side-menu-progress-bar',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/ProgressBar')
 			},
 			{
 				path: 'tooltip',
 				name: 'side-menu-tooltip',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Tooltip')
 			},
 			{
 				path: 'dropdown',
 				name: 'side-menu-dropdown',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Dropdown')
 			},
 			{
 				path: 'toast',
 				name: 'side-menu-toast',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Toast')
 			},
 			{
 				path: 'typography',
 				name: 'side-menu-typography',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Typography')
 			},
 			{
 				path: 'icon',
 				name: 'side-menu-icon',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Icon')
 			},
 			{
 				path: 'loading-icon',
 				name: 'side-menu-loading-icon',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/LoadingIcon')
 			},
 			{
 				path: 'regular-form',
 				name: 'side-menu-regular-form',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/RegularForm')
 			},
 			{
 				path: 'datepicker',
 				name: 'side-menu-datepicker',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Datepicker')
 			},
 			{
 				path: 'tail-select',
 				name: 'side-menu-tail-select',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/TailSelect')
 			},
 			{
 				path: 'file-upload',
 				name: 'side-menu-file-upload',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/FileUpload')
 			},
 			{
 				path: 'wysiwyg-editor',
 				name: 'side-menu-wysiwyg-editor',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/WysiwygEditor')
 			},
 			{
 				path: 'validation',
 				name: 'side-menu-validation',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Validation')
 			},
 			{
 				path: 'chart',
 				name: 'side-menu-chart',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Chart')
 			},
 			{
 				path: 'slider',
 				name: 'side-menu-slider',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/Slider')
 			},
 			{
 				path: 'image-zoom',
 				name: 'side-menu-image-zoom',
-				meta: {title: '管理中心'},
+				meta: { title: '管理中心' },
 				component: () => import('@/views/ImageZoom')
 			},
 			{
 				path: 'profile',
 				name: 'profile',
-				meta: {title: '个人资料'},
+				meta: { title: '个人资料' },
 				component: () => import('@/views/Profile')
 			},
 			{
 				path: 'invitation',
 				name: 'invitation',
-				meta: {title: '邀请赚钱'},
+				meta: { title: '邀请赚钱' },
 				component: () => import('@/views/Invitation')
 			},
 			{
 				path: 'app',
 				name: 'app',
-				meta: {title: '应用中心'},
+				meta: { title: '应用中心' },
 				component: () => import('@/views/App')
 			},
 			{
 				path: 'myApp',
 				name: 'my-app',
-				meta: {title: '我的应用'},
+				meta: { title: '我的应用' },
 				component: () => import('@/views/MyApp')
 			}
 		]
@@ -347,19 +349,19 @@ const routes = [
 	{
 		path: '/test',
 		name: 'test',
-		meta: {title: '管理中心'},
+		meta: { title: '管理中心' },
 		component: () => import('@/views/Inbox')
 	},
 	{
 		path: '/register',
 		name: 'register',
-		meta: {title: '管理中心'},
+		meta: { title: '管理中心' },
 		component: () => import('@/views/Register')
 	},
 	{
 		path: '/404',
 		name: 'error-page',
-		meta: {title: '管理中心'},
+		meta: { title: '管理中心' },
 		component: () => import('@/views/ErrorPage')
 	},
 	{
@@ -377,14 +379,27 @@ const router = new VueRouter({
 		if (savedPosition) {
 			return savedPosition;
 		} else {
-			return {x: 0, y: 0};
+			return { x: 0, y: 0 };
 		}
 	}
 });
 
 router.beforeEach((to, from, next) => {
 	document.title = to.meta.title ? to.meta.title + ' - ZhiOS智莺' : 'ZhiOS智莺'
+	if (to.path === '/') {
+		apost("/api/sign/status").then((res) => {
+			
+			next('/Dashboard')
+			// 用户登录未失效， 直接跳转到会员中心页面
+		}).catch(err=>{
+			return
+		})
+	}
+
 	next()
-  })
+})
+
+
+
 
 export default router;

src/utils/api/login.js

@@ -1,5 +1,6 @@
 
 import request from '@/utils/request'
+import { url } from 'vuelidate/lib/validators'
 
 export function apost (url,data){
     return request({
@@ -10,3 +11,10 @@ export function apost (url,data){
 }
 
 
+export function aget(url){
+    return request({
+        url:url,
+        method:'get'
+    })
+}
+

src/utils/request.js

@@ -48,7 +48,7 @@ service.interceptors.response.use(response => {
   error => {
 
 
-    if(error.response.status !== 200) {
+    if(error.response.status !== 200 && error.response.status !== 401) {
       Message.error(error.response.data.msg)
     }
    

src/views/Dashboard.vue

@@ -8,12 +8,12 @@
           <a href="" class="ml-auto flex text-theme-1">
             <RefreshCcwIcon class="w-4 h-4 mr-3" /> 刷新数据
           </a>
-          <h2 class="text-lg font-medium truncate mr-5" style="margin: 0 100px">
+          <h2 class="text-lg font-medium truncate mr-5" style="margin: 0px 180px 0 40px;">
             我的余额
           </h2>
           <h2
             class="text-lg font-medium truncate mr-5"
-            style="margin-right: 100px"
+            style="margin-right: 170px"
           >
             我的推广
           </h2>
@@ -220,13 +220,27 @@
       <div class="xxl:pl-6 grid grid-cols-12 gap-6">
         <!-- BEGIN: 我的专属客服经理 -->
         <div
-          class="col-span-12 md:col-span-6 xl:col-span-4 xxl:col-span-12 mt-3 xxl:mt-8"
+          class="col-span-12 md:col-span-6 xl:col-span-4 xxl:col-span-12 mt-3 xxl:mt-8 intro-x"
         >
           <div class="intro-x flex items-center h-10">
             <h2 class="text-lg font-medium truncate mr-5">我的专属客服经理</h2>
           </div>
           <div class="mt-5">
-            <div class="exclusive-box"></div>
+            <div class="exclusive-box">
+                <div class="manager-left">
+                  <div>
+                    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3244810419,3612941851&fm=11&gp=0.jpg" alt="">
+                  </div>
+                  <div class="managerNmae">
+                    Robert De Niro
+                  </div>
+                  <div class="managerPhone">
+                    电话：1123451516125
+                  </div>
+                </div>
+                <!-- 二维码 -->
+                <img class="rightCode" src="@/assets/images/profile-1.jpg" alt="">
+            </div>
           </div>
         </div>
         <!-- BEGIN: 我的好友 -->
@@ -304,64 +318,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// 屏幕宽度小于1100px
-// @media screen and (max-width:1660px ) {
-//   .itemBox {
-//     display: block !important;
-//     width: 100%;
-//   }
-//   .red-item::before,
-//   .green-item::before,
-//   .bule-item::before {
-//     left: 20px !important;
-//   }
-
-//   .q-floatLeft2 > li > span:nth-child(1) {
-//     margin-left: 40px !important;
-//   }
-
-//   .q-floatLeft2 > li > span:nth-child(2) {
-//     margin-left: 40px !important;
-//   }
-
-//   .q-floatLeft2 > li > span:nth-child(3) {
-//     margin-left: 40px !important;
-//   }
-
-// }
-
-// // 屏幕宽度小于1100px
-// @media screen and (max-width: 767px) {
-//   .itemBox {
-//     display: block !important;
-//     width: 100% !important;
-//   }
-//   .circle-box {
-//     display: none;
-//   }
-
-//   .red-item::before,
-//   .green-item::before,
-//   .bule-item::before {
-//     left: 20px !important;
-//   }
-
-//   .q-floatLeft2 > li > span:nth-child(1) {
-//     margin-left: 40px !important;
-//   }
-
-//   .q-floatLeft2 > li > span:nth-child(2) {
-//     margin-left: 40px !important;
-//   }
-
-//   .q-floatLeft2 > li > span:nth-child(3) {
-//     margin-left: 40px !important;
-//   }
-//   .screenBody {
-//     display: block;
-//   }
-// }
-
+ 
 .itemBoxB {
   width: 18.4%;
   height: 246px;
@@ -377,7 +334,7 @@ export default {
 }
 
 .item-padding {
-  padding: 36px 2vw;
+  padding: 36px 1.2%;
 }
 
 .q-grid {
@@ -388,7 +345,7 @@ export default {
 
 .itemBox {
   box-sizing: border-box;
-  min-width: 58%;
+  min-width: 55%;
   float: left;
   margin: 30px 2.5% 0 0;
   background: #fff;
@@ -606,4 +563,87 @@ export default {
 .CardView-box2 {
   width: calc(100% + 25px);
 }
+
+
+.exclusive-box {
+  padding: 12px 20px;
+  overflow: hidden;
+  
+}
+
+.manager-left {
+  float: left;
+  margin-right: auto;
+ 
+  img {
+    width: 42px ;
+    height: 42px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .managerNmae {  
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 19px;
+    color: #080e18;
+    opacity: 1;
+    margin: 6px 0;
+    }
+    .managerPhone {
+      font-size: 12px;
+      font-weight: 300;
+      line-height: 16px;
+      color: #718096;
+      opacity: 1;
+    }
+}
+
+.rightCode{
+  width: 91px;
+  height: 91px;
+  float: right;
+}
+
+
+
+
+
+
+
+
+// 
+
+@media screen and (max-width: 1172px) {
+ .itemBox {
+    width: 100%;
+    min-width: 420px;
+
+ }
+  .itemBoxB {
+      width: 100%;
+      margin-left: 0 !important;
+      padding: 24px ;
+  }
+}
+
+@media screen and (max-width: 618px) {
+ .circle-box {
+   display: none;
+
+ }
+ .itemBox {
+   padding: 20px;
+ }
+
+ .itemBox,.itemBoxB {
+   
+   border-radius: 0;
+
+ }
+}
+
+
+
+
 </style>

src/views/Login.vue

@@ -106,7 +106,7 @@
 
 <script>
 import Cookies from "js-cookie";
-import { apost } from "../utils/api/login";
+import { apost, aget } from "../utils/api/login";
 export default {
   data() {
     return {};
@@ -136,8 +136,15 @@ export default {
     //   import("../utils");
     //   import("../assets/sass/app2.scss")
     // },3000)
+    // this.verifyLogin();
   },
   methods: {
+    // verifyLogin: function () {
+    //   // 校验登录状态
+    //   // apost("/api/sign/status").then((res) => {
+    //   //   console.log(res);
+    //   // });
+    // },
     getLogin: function () {
       if (!/^1(3|4|5|7|8)\d{9}$/.test(this.account.phone)) {
         //正则校验手机号是否合法
@@ -146,15 +153,14 @@ export default {
       if (this.account.psw === "") {
         return this.$message.error("请输入密码");
       }
-
-      apost("/sign/in", {
+      apost("/api/sign/in", {
         phone: this.account.phone,
         psw: this.account.psw,
       })
         .then((result) => {
           if (result.code === 0) {
             this.$router.push("/Dashboard");
-            this.$message.success('登陆成功')
+            this.$message.success("登陆成功");
             if (this.account.Label) {
               Cookies.set("account", this.account, { expires: 7 }); // 记住账号密码7天后过期
             } else {

vue.config.js

@@ -9,11 +9,11 @@ module.exports = {
 		https: false,
 		hotOnly: false,
 		proxy: {
-			'/': {
+			'/api': {
 				target: 'http://192.168.0.123:8080', //API服务器的地址 
 				ws: true, //代理websockets
 				changeOrigin: true, // 虚拟的站点需要更管origin
-				pathRewrite: {   
+				pathRewrite: {
 					'^/api': '/'
 				}
 			}