vue路由第三篇-导航守卫、路由元信息、动态路由

导航守卫

1. 环境准备

1.1 安装Element-Plus

npm install element-plus

1.2 注册Element-Plush

需要在 main.ts 文件中注册

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

1.3 定义组件

定义一个首页组件

<template>
    <div>首页</div>
</template>

<script setup lang="ts">
</script>

再创建一个登录组件：

<template>
    <div class="login">
        登录
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

</script>

<style lang="less" scoped>
.login {
    height: 100%;
    display: flex;
    justify-content: center;
}
</style>

1.4 配置路由

在 src 目录，新建 router 目录，然后创建 index.ts 路由配置文件。

import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        alias: ['/index'],
        component: () => import('../views/Index.vue'),
    },
    {
        path: '/login',
        component: () => import('../views/Login.vue'),
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

1.5 挂载路由

在 main.ts 文件中挂载路由。

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

1.6 定义入口

在根组件 App.vue 中使用路由

<template>
    <router-view></router-view>
</template>
<script setup lang="ts">
</script>
<style>
* {
    padding: 0;
    margin: 0;
}
html,body,#app {
    width: 100%;
    height: 100%;
}
</style>

2. 完善登录

<template>
    <div class="login">
        <!-- 1. 添加登录的表单 -->
        <el-card class="box-card">
            <span>登录</span>
            <!-- 3. 把数据和表单进行绑定 -->
            <el-form ref="userFormRef" :model="user" :rules="rules" label-width="60px">
                <!-- 9. 绑定校验规则，1）在 el-form 中添加 :rules="rules" 2）在 el-form-item 中添加 prop 属性 -->
                <el-form-item label="账号" prop="account">
                    <!-- 4. 把输入框与数据（表单对象）绑定 -->
                    <el-input type="text" v-model="user.account" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="user.password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <!-- 5. 添加表表单提交事件 -->
                    <el-button type="primary" @click="onSubmit(userFormRef)">登录</el-button>
                    <el-button @click="onReset(userFormRef)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import {ElMessage, FormItemRule} from 'element-plus'
import type { FormInstance } from 'element-plus'

// 10. 实现重置功能 1）需要在 el-form 标签上指定 ref="userFormRef" 2）在事件中把 userFormRef 以参数的方式传递给事件对象 3）在声明一个 userFormRef 响应式对象
const userFormRef = ref<FormInstance>()

// 定义类型
type User = {
    account: string,
    password: string,
}
// 2. 定义数据
const user = reactive<User>({
    account: '',
    password: '',
})
// 6. 实现事件
const onSubmit = (formEl: FormInstance | undefined) => {
    // 11. 实现提交时校验表单
    //console.log(user)
    formEl?.validate(valid => {
        //console.log(valid)
        if (valid) {
            console.log(user)
            // 把数据存到浏览器的本地
            localStorage.setItem('token', JSON.stringify(user)) // 把对象转字符串
            ElMessage.success('登录成功！')
        } else  {
            ElMessage.error('登录失败！')
        }
    })

}
const onReset = (formEl: FormInstance | undefined) => {
    console.log('-------111--------' + formEl)
    if (!formEl) return
    formEl.resetFields() // 重置方法
}

// 7. 定义校验器类型
type Rules = {
    [key in keyof User]?: Array<FormItemRule>
}
// 8. 定义校验规则
const rules = reactive<Rules>({
    // 写要校验的字段名称
    account: [ // 是一个数组，数组中是对象
        { // 对象
            required: true, // 表示这个字段必须输入
            message: '账号不能为空！', // 校验失败后的提示信息
            type: 'string', // 输入的数据类型
            trigger: 'blur', // 校验触发的条件：是失去焦点后就触发
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空!',
            type: 'string',
            trigger: 'blur',
        },
        {
            min: 6, // 指定密码的最小字符数
            max: 16, // 指定密码的最大字符数
            message: `密码的长度在 6 和 16 之间`,
            trigger: 'blur',
        }
    ]
})


</script>

<style lang="less" scoped>
.login {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    .box-card {
        width: 480px;
        text-align: center;
        span {
            display: block;
            font-size: 24px;
            margin-bottom: 15px;
        }
    }
}
</style>

3. 导航守卫

在 main.ts 文件中添加导航守卫的配置

// 定义白名单
const whiteList = ['/']
router.beforeEach((to, from, next) => {
    if (whiteList.includes(to.path) || localStorage.getItem('token')) {
        next()
    } else {
        next('/')  // 如果来源路由不在白名单中或没有进行登录，则转到登录路由
    }
})

每个守卫方法接收三个参数：
to: Route，即将要进入的目标，路由对象；
from: Route，当前导航正要离开的路由；
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

2. 路由元信息

在路由配置列表中通过 meta 属性来配置路由元信息。

    {
        path: '/index',
        //alias: ['/index'],
        component: () => import('../views/Index.vue'),
        meta: { // 路由元信息
            title: '首页标题'
        }
    },

3. 动态路由

对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。

3.1 编写后端

3.1.1 创建一个后端项目

在IDE中创建一个目录，如：router-server 来作为后端项目的名称。

3.1.2 安装依赖

npm init -y # 生成 package.json

npm install ts-node -g

# node.js 声明文件
npm install @types/node -D

npm install express

# express 声明文件
npm install @types/express -D

3.1.3 编写基础服务

在项目的根目录下新建 index.ts 文件，代码如下：

import express, {Express, Request, Response} from 'express'

// 创建应用对象
const app: Express = express()

// 发送请求
app.get('/login', (req: Request, res: Response) => {
    // 设置可跨域
    res.header('Access-Control-Allow-Origin', '*')

    // 验证登录是否存在，假设账号为 admin 密码为 123456
    if (req.query.account === 'admin' && req.query.password === '123456') {
        // 登录成功后向客户端响应数据
        res.json({
            route: [
                {
                    path: '/demo01',
                    name: 'Demo01',
                    component: 'Demo01.vue'
                },
                {
                    path: '/demo02',
                    name: 'Demo02',
                    component: 'Demo02.vue'
                },
                {
                    path: '/demo03',
                    name: 'Demo03',
                    component: 'Demo03.vue'
                }
            ]
        })
    } else if (req.query.account === 'jock' && req.query.password === '123456') {
        res.json({
            route: [
                {
                    path: '/demo01',
                    name: 'Demo01',
                    component: 'Demo01.vue'
                },
                {
                    path: '/demo02',
                    name: 'Demo02',
                    component: 'Demo02.vue'
                }
            ]
        })
    } else {
        res.json({
            code: 400,
            message: '账号或密码错误！'
        })
    }
})

// 启动服务并设置端口
app.listen(9999, () => {
    console.log('Local: http://localhost:9999')
})

3.1.4 配置服务

修改 package.json 文件，在 scripts 标签中定义启动项目的执行脚本。

{

  "scripts": {
    "dev": "ts-node index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

}

3.1.5 启动服务

做完以上操作后，执行如下命令来启动服务。

npm run dev

3.2 编写前端

3.2.1 创建组件

在项目中创建 Demo01.vue、Demo02.vue 和 Demo03.vue 这三个组件，它们初始代码如下：

<template>
    <h3>Demo01</h3>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

3.2.2 安装axios

由于我们需要异步请求服务端来进行登录，因些，我们需要安装 axios 来实现异步操作。

npm install axios

3.2.3 实现登录

安装好 axios 后，在登录组件 Login.vue 中使用。

import axios from 'axios'

// 异步请求后端接口
const initRouter = async () => {
    const result = await axios.get('http://localhost:9999/login', { params: user })
    console.log(result)
}

// 6. 实现事件
const onSubmit = (formEl: FormInstance | undefined) => {
    // 11. 实现提交时校验表单
    //console.log(user)
    formEl?.validate(valid => {
        //console.log(valid)
        if (valid) {
            console.log(user)
            // 把数据存到浏览器的本地
            localStorage.setItem('token', JSON.stringify(user)) // 把对象转字符串
            ElMessage.success('登录成功！')

            // 调用异步请求接口
            initRouter()
        } else  {
            ElMessage.error('登录失败！')
        }
    })
}

3.2.4 添加路由

把从服务端响应回来的数据添加到路由中，这时需要使用到 router.addRoute() 和 router.removeRoute() 这两个动态路由对象方法。

// 异步请求后端接口
const initRouter = async () => {
    const result = await axios.get('http://localhost:9999/login', { params: user })
    //console.log(result)
    //console.log(result.data)
    result.data.route.forEach((v: any) => {
        // 动态添加路由
        router.addRoute({
            path: v.path,
            name: v.name,
            component: () => import(`./${v.component}`)
        })
    })

    // 跳转到首页
    router.push('/index')
}