前置守衛

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import {router} from './router'
// import 引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
// use 注入 ElementPlus 插件
app.use(ElementPlus)const whiteList = ['/']// beforeEach 可以定義不止一個，vue會收集所有定義的路由鉤子，所以next的作用不應該是跳轉，而是使步驟進行到下一個你定義的鉤子
router.beforeEach((to, from, next) => {// token每次都要跟后端校驗一下是否過期if(whiteList.includes(to.path) || localStorage.getItem('token')){next()}else{next('/')}
})
app.mount('#app')

index.ts

import { createRouter, createWebHistory } from 'vue-router'export const router = createRouter({// import.meta.env.BASE_URL 應用的基本 URL。基本 URL 是指在你的應用部署到某個域名或子路徑時，URL 的起始部分。例如，如果你的應用部署在 https://example.com/myapp/ 這個路徑下，那么 import.meta.env.BASE_URL 就會是 /myapp/。history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',component: () => import('@/views/Login.vue'),},{path: '/index',component: () => import('@/views/Index.vue'),},],
})

App.vue

<template><router-view></router-view>
</template><script setup lang="ts"></script><style>
/* 注意 style 標簽 別加 scoped 不然設置寬高不生效 */
* {margin: 0;padding: 0;
}
html, body, #app {height: 100%;overflow: hidden;
}
</style>

Login.vue

<template><div class="login"><el-card class="box-card"><el-form ref="form" :rules="rules" :model="formInline" class="demo-form-inline"><el-form-item prop="user" label="賬號："><el-input v-model="formInline.user" placeholder="請輸入賬號" /></el-form-item><el-form-item prop="password" label="密碼："><el-input v-model="formInline.password" placeholder="請輸入密碼" type="password"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">登錄</el-button></el-form-item></el-form></el-card></div>
</template><script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { FormItemRule, FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus'const router = useRouter()
type Form = {user: string,password: string
}
type  Rules = {[k in keyof Form]?: Array<FormItemRule>
}
const formInline = reactive<Form>({user: '',password: '',
})
const form = ref<FormInstance>()
const rules = reactive({user: [{required: true,message: '請輸入賬號',type: 'string',}],password: [{required: true,message: '請輸入密碼',type: 'string',}]
})const onSubmit = () => {console.log('submit!', form.value)form.value?.validate((validate)=>{if (validate) {router.push('/index')localStorage.setItem('token', '1')} else {ElMessage.error('賬號或密碼錯誤')}})}
</script><style scoped lang="less">
.login {height: 100%;display: flex;justify-content: center;align-items: center;
}
</style>

剛開始未登錄過，不能使用輸入 /index 的方式跳轉，localStorage 不能讀取 token 。

登錄之后可以使用輸入 /index 的方式跳轉，localStorage 已存儲 token 。

后置守衛

注冊全局后置鉤子，和前置守衛不同，這些鉤子不會接受 next 函數，也不會改變導航本身。

例如：添加一個加載進度條功能

loadingBar.vue

<template><div class="wraps"><div ref="bar" class="bar"></div></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
let speed = ref<number>(1)
let bar = ref<HTMLElement>()
let timer = ref<number>(0)
const startLoading = () => {speed.value = 1let dom = bar.value as HTMLElementtimer.value = window.requestAnimationFrame(function fn() {if (speed.value < 90) {speed.value += 1;dom.style.width = speed.value + '%'timer.value = window.requestAnimationFrame(fn)} else {speed.value = 1window.cancelAnimationFrame(timer.value)}})
}
const endLoading = () => {let dom = bar.value as HTMLElementsetTimeout(() => {window.requestAnimationFrame(() => {speed.value = 100dom.style.width = speed.value + '%'})}, 500)}defineExpose({ startLoading, endLoading })
</script><style scoped lang="less">
.wraps {width: 100%;position: fixed;height: 10px;top: 0;.bar {height: inherit;width: 0;background-color: #409eff;}
}
</style>

main.ts

import { createApp,createVNode,render } from 'vue'
import App from './App.vue'
import {router} from './router'
// import 引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import loadingBar from './components/loadingBar.vue'const Vnode = createVNode(loadingBar)
render(Vnode,document.body)
const app = createApp(App)
app.use(router)
// use 注入 ElementPlus 插件
app.use(ElementPlus)const whiteList = ['/']// beforeEach 可以定義不止一個，vue會收集所有定義的路由鉤子，所以next的作用不應該是跳轉，而是使步驟進行到下一個你定義的鉤子
router.beforeEach((to, from, next) => {Vnode.component?.exposed?.startLoading()// token每次都要跟后端校驗一下是否過期if(whiteList.includes(to.path) || localStorage.getItem('token')){next()}else{next('/')}
})router.afterEach((to, from) => {Vnode.component?.exposed?.endLoading()
})
app.mount('#app')