页面跳转，路由守卫实现

Author: zhaowei-0-1

package-lock.json

@@ -13,6 +13,7 @@
     "axios": "^1.5.1",
     "echarts": "^5.4.3",
     "element-plus": "^2.4.0",
+    "js-cookie": "^3.0.5",
     "mockjs": "^1.1.0",
     "unplugin-element-plus": "^0.8.0",
     "vue": "^3.3.4",

package.json

@@ -42,6 +42,7 @@ export default {
     setup() {
         const store = useStore()
         const router = useRouter();
+        // 数组对象结构
         const list = [
             {
                 path: '/user',

src/components/CommonAside.vue

@@ -9,7 +9,7 @@
                 </el-icon>
             </el-button>
             <el-breadcrumb separator="/" class="breadcrumb">
-                <!--  -->
+                <!-- 点击左侧commonAside 显示commonHeader -->
                 <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                 <el-breadcrumb-item :to="current.path" v-if="current">{{ current.lable }}</el-breadcrumb-item>
 
@@ -23,7 +23,7 @@
                 <template #dropdown>
                     <el-dropdown-menu>
                         <el-dropdown-item>个人中心</el-dropdown-item>
-                        <el-dropdown-item>退出</el-dropdown-item>
+                        <el-dropdown-item @click="handleLoginOut">退出</el-dropdown-item>
                     </el-dropdown-menu>
                 </template>
             </el-dropdown>
@@ -34,7 +34,8 @@
 <script>
 // import { DefineComponent } from 'vue-demi';
 import { computed, defineComponent } from 'vue';
-import { useStore } from 'vuex'
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 export default {
     setup() {
         let store = useStore()
@@ -49,12 +50,23 @@ export default {
         // 计算属性 取到currentMenu
         const current = computed(() => {
             return store.state.currentMenu;
+           
         })
+        const router = useRouter();
+        // 退出 需要清除菜单 在store index.js 
+        const handleLoginOut = () => {
+            store.commit('cleanMenu');
+            router.push({
+                name: 'login',
+            });
+
+        }
         return {
             // imgSrc,
             getImagSrc,
             handleCollapse,
             current,
+            handleLoginOut,
 
         }
     }

src/components/CommonHeader.vue

@@ -56,6 +56,7 @@ export default {
     padding-top: 10px;
     padding-left: 10px;
     // padding: 20px;
+    width: 100%;
     .el-tag {
         margin-right: 15px;
         cursor: pointer;

src/components/CommonTab.vue

@@ -14,5 +14,30 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 // 全局挂在api
 app.config.globalProperties.$api = api
 store.commit("addMenu", router)
+// 页面跳转-检查一个给定的路径是否存在于路由列表中
+function checkRouter(path) {
+  // 获取路由
+  let hasCheck = router.getRoutes().filter(route => route.path == path).length
+  if (hasCheck) {
+    return true
+  } else {
+    return false
+  }
+  // console.log(router.getRoutes(), 'router.getRoutes');
+}
+checkRouter()
+// 路由守卫 它是在每个路由导航之前执行的一个钩子函数
+router.beforeEach((to, from, next) => {
+  store.commit('getToken')
+  const token = store.state.token
+  // 检查token是否存在，如果不存在且用户尝试访问的不是登录页面，就会重定向到登录页面。
+  if (!token && to.name !== 'login') {
+    next({ name: 'login' })
+  } else if (!checkRouter(to.path)) {
+    next({ name: 'home' })
+  } else {
+    next()
+  }
+})
 app.use(router).use(store)
 app.mount('#app')

src/main.js

@@ -32,6 +32,7 @@ const routes = [
     },
     {
         path: '/login',
+        name: 'login',
         component: () => import('../views/Login.vue')
     },
 ]

src/router/index.js

@@ -1,5 +1,7 @@
 // vuex 侧边栏折叠展开
 import { createStore } from 'vuex';
+import Cookie from 'js-cookie';
+
 import router from '../router';
 export default createStore({
     state: {
@@ -13,21 +15,23 @@ export default createStore({
                 icon: 'home'
             }
         ],
-        menu: []
+        menu: [],
+        token: '',
     },
     mutations: {
         updateIsCollapse(state, payload) {
             state.isCollapse = !state.isCollapse
         },
+        // 面包屑实现
         selectMenu(state, val) {
             // 判断
             // val.name == 'home' ? (state.currentMenu = null) : (state.currentMenu = val)
             if (val.name == 'home') {
                 state.currentMenu = null
             } else {
                 state.currentMenu = val
-                let result = state.tabsList.findIndex(item => item.name === val.name)
-                result == -1 ? state.tabsList.push(val) : ''
+                let result = state.tabsList.findIndex(item => item.name === val.name);
+                result === -1 ? state.tabsList.push(val) : ''
             }
         },
         closeTab(state, val) {
@@ -68,7 +72,25 @@ export default createStore({
             menuArray.forEach(item => {
                 router.addRoute('home1', item)
             })
-        }
+        },
+
+        // 退出 清除数据
+        cleanMenu(state) {
+            state.menu = []
+            localStorage.removeItem('menu')
+        },
 
+        // 路由守卫
+        setToken(state, val) {
+            state.token = val
+            Cookie.set('token', val)
+        },
+        clearToken(state) {
+            state.token = ''
+            Cookie.remove('token')
+        },
+        getToken(state) {
+            state.token = state.token || Cookie.get('token')
+        }
     }
 })

src/store/index.js

@@ -31,6 +31,7 @@ export default {
             // console.log(res, 'loginForm')
             store.commit("setMenu", res.menu);
             store.commit("addMenu", router);
+            store.commit("setToken", res.token);
             // 路由跳转
             router.push({
                 name: 'home',

src/views/Login.vue

@@ -40,11 +40,14 @@ export default defineComponent({
 }
 
 .common-layout {
+
   .lay-container {
     flex-wrap: nowrap;
 
     .right-main {
-      height: calc(100% -124px) !important;
+      height: 100%;
+      height: calc(100% -120px) !important;
+
     }
 
   }