登录拦截

src/layout/Navbar.vue

@@ -2,7 +2,6 @@
   <div>
     <div v-show="isLogin" class="left-menu">
         <hamburger class="hamburger-container" :is-active="opened" @toggleClick="toggleSideBar" />
-        <!-- <el-image class="logo" :src="require('@/assets/images/logo.png')"></el-image> -->
       <div class="title">
         <p style="margin-top:15px">智慧运营管理中心</p>
       </div>
@@ -87,9 +86,7 @@ export default {
       background: #266999;
     }
   }
-  .logo{
-
-  }
+ 
 
   .title {
     position: absolute;

src/main.js

@@ -18,7 +18,20 @@ import "./utils/directive";
 
 Vue.use(ElementUI, { locale });
 Vue.prototype.axios = axios;
-Vue.prototype.$dayjs=dayjs
+Vue.prototype.$dayjs = dayjs;
+
+//路由拦截
+router.beforeEach((to, from, next) => {
+  if (to.path === '/login') {
+    next();
+  } else {
+    if (to.meta.requireAuth && !sessionStorage.getItem('Authorization')) {
+      next({ path: '/login' });
+    } else {
+      next();
+    }
+  }
+})
 
 new Vue({
   router,

src/router/index.js

@@ -16,27 +16,27 @@ const routes = [
   {
     path: '/home',
     name: 'home',
-    meta: { requrieAuth: true },
+    meta: { requireAuth: true },
     redirect: '/home/user/person',
     component: () => import('../views/HomeView.vue'),
     children: [
       {
         path: 'user',
         name: 'user',
-        meta: { requrieAuth: true },
+        meta: { requireAuth: true },
         redirect:'/home/user/person',
         component:() => import('../views/userManagement/index.vue'),
         children: [
           {
             path: 'person',
             name: 'person',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/userManagement/personManagement/index.vue'),
           },
           {
             path: 'group',
             name: 'group',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/userManagement/groupManagement/index.vue'),
           },
         ],
@@ -44,38 +44,38 @@ const routes = [
       {
         path: 'role',
         name: 'role',
-        meta: { requrieAuth: true },
+        meta: { requireAuth: true },
         component: () => import('../views/permissionManagement/roleOverview.vue')
       },
       {
         path: 'system',
         name: 'system',
-        meta: { requrieAuth: true },
+        meta: { requireAuth: true },
         redirect:'home/system/strategy',
         component: () => import('../views/systemManagement/index.vue'),
         children: [
           {
             path: 'strategy',
             name: 'strategy',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/systemManagement/strategyConfiguration/index.vue')
           },
           {
             path: 'message',
             name: 'message',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/systemManagement/messageConfiguration/commonMessage.vue')
           },
           {
             path: 'info',
             name: 'info',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/systemManagement/infoConfiguration/index.vue')
           },
           {
             path: 'index',
             name: 'index',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/systemManagement/indexConfiguration/index.vue')
           },
         ],
@@ -83,19 +83,19 @@ const routes = [
       {
         path: 'device',
         name: 'device',
-        meta: { requrieAuth: true },
+        meta: { requireAuth: true },
         component: () => import('../views/deviceManagement/index.vue'),
         children: [
           {
             path: 'config',
             name: 'config',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/deviceManagement/deviceConfig.vue'),
           },
           {
             path: 'warning',
             name: 'warning',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/deviceManagement/deviceWarning.vue'),
           }
         ]
@@ -103,25 +103,25 @@ const routes = [
       {
         path: 'data',
         name: 'data',
-        meta: { requrieAuth: true },
+        meta: { requireAuth: true },
         component: () => import('../views/dataManagement/index.vue'),
         children: [
           {
             path: 'statement',
             name: 'statement',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/dataManagement/statementConfig.vue'),
           },
           {
             path: 'report',
             name: 'report',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/dataManagement/reportConfig.vue'),
           },
           {
             path: 'basicInfo',
             name: 'basicInfo',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/dataManagement/basicInfo/index.vue'),
           }
         ]
@@ -129,25 +129,25 @@ const routes = [
       {
         path: 'service',
         name: 'service',
-        meta: { requrieAuth: true },
+        meta: { requireAuth: true },
         component: () => import('../views/servicesManagement/allServices.vue'),
         // children: [
         //   {
         //     path: 'all',
         //     name: 'allServices',
-        //     meta: { requrieAuth: true },
+        //     meta: { requireAuth: true },
         //     component: () => import('../views/servicesManagement/allServices.vue'),
         //   },
         //   {
         //     path: 'installed',
         //     name: 'installed',
-        //     meta: { requrieAuth: true },
+        //     meta: { requireAuth: true },
         //     component: () => import('../views/servicesManagement/allServices.vue'),
         //   },
         //   {
         //     path: 'uninstall',
         //     name: 'uninstall',
-        //     meta: { requrieAuth: true },
+        //     meta: { requireAuth: true },
         //     component: () => import('../views/servicesManagement/allServices.vue'),
         //   }
         // ]
@@ -155,20 +155,20 @@ const routes = [
       {
         path: 'security',
         name: 'security',
-        meta: { requrieAuth: true },
+        meta: { requireAuth: true },
         redirect: '/home/security/logMonitor',
         component: () => import('../views/securityManagement/index.vue'),
         children: [
           {
             path: 'logMonitor',
             name: 'logMonitor',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/securityManagement/logMonitor.vue'),
           },
           {
             path: 'systemMonitor',
             name: 'systemMonitor',
-            meta: { requrieAuth: true },
+            meta: { requireAuth: true },
             component: () => import('../views/securityManagement/systemMonitor/index.vue'),
           },
         ],

src/store/modules/user.js

@@ -30,7 +30,7 @@ const user = {
                 login({ username: username.trim(), password: password }).then(res => {
                     const { data } = res;
                     commit('SET_TOKEN', data.data);
-                    localStorage.setItem('Authorization',data.data);
+                    sessionStorage.setItem('Authorization',data.data);
                     resolve(data);
                 }).catch(error => {
                     console.log('登陆失败');

src/views/userManagement/personManagement/messageDialog/addUser.vue

@@ -74,7 +74,7 @@
                             </el-select>
                         </el-form-item>
                     </div>
-                    <div class="avatar">
+                    <div class="avatar-upload">
                         <el-avatar :size="110" :src="form.photograph" @click=""></el-avatar>
                         <span>
                             <p style="font-size: 12px; line-height: 20px; color: #E9E9E9; text-align: center;">上传头像</p>
@@ -167,7 +167,7 @@ export default {
     color: #FFFFFF;
 }
 
-.avatar {
+.avatar-upload {
     position: absolute;
     right: 40px;
     top: 100px;