【Vue3+Ts项目】硅谷甄选 — 路由配置+登录模块+layout组件+路由鉴权

唧唧bong_

已于 2024-01-12 15:32:35 修改

阅读量2.4k

点赞数 29

分类专栏： vue3+ts项目记录《硅谷甄选》文章标签： javascript 前端 vue.js

于 2023-12-08 15:15:51 首次发布

本文链接：https://blog.csdn.net/m0_67992720/article/details/134781429

版权

vue3+ts项目记录《硅谷甄选》专栏收录该内容

12 篇文章 8 订阅

订阅专栏

一、路由配置

项目一共需要4个一级路由：登录（login）、主页（home）、404、任意路由（重定向到404）。

1.1 安装路由插件

pnpm install vue-router

1.2 创建路由组件

在src目录下新建views文件夹，在views中创建login、home、404路由组件。

1.3 配置路由

在src目录下新建router文件夹，书写路由配置（包含index.ts和routes.ts）。

src/router/routes.ts

// 对外暴露配置路由（常量路由）
export const constantRoute = [
    {
        // 登录
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login'
    },
    {
        // 登录成功以后展示数据的路由
        path: '/',
        component: () => import('@/views/home/index.vue'),
        name: 'layout'
    },
    {
        // 404
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404'
    },
    {
        // 任意路由
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'Any'
    }
]

src/router/index.ts

// 通过vue-router插件实现路由配置
import { createRouter, createWebHashHistory } from 'vue-router';
// 引入routes配置项
import { constantRoute } from './routes';
// 创建路由
let router = createRouter({
    // 路由模式hash
    history: createWebHashHistory(),
    routes: constantRoute,
    // 滚动行为
    scrollBehavior() {
        return {
            left: 0,
            top: 0
        }
    }
})

export default router;

1.4 引入路由

在入口文件（main.js）引入路由：

// 引入路由
import router from '@/router'
// 注册模板路由
app.use(router)

最后，在模板中通过 <router-view></router-view>占位，根据当前的路由状态动态地渲染匹配到的组件。

二、登录模块

2.1 登录路由静态的搭建

采用element-plus中的Layout布局（栅格布局）、From表单组件、input组件、button组件。

Layout布局：一共是24 分栏，:span代表栅格占据的列数，:xs代表屏幕宽度<768px时栅格占据的列数。

input组件：:prefix-icon代表前缀图标，show-password代表是否显示切换密码图标

src/views/login/index.vue

<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_from">
                    <h1>Hello</h1>
                    <h2>欢迎来到唧唧bong甄选</h2>
                    <el-form-item>
                        <el-input :prefix-icon="User" v-model="loginFrom.username"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" :prefix-icon="Lock" v-model="loginFrom.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login_btn" type="primary" size="default">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import {User, Lock} from '@element-plus/icons-vue'
import { reactive } from 'vue';
let loginFrom = reactive({
    username: 'admin',
    password: '111111'
})
</script>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat;
    background-size: cover;
    .login_from{
        width: 80%;
        position: relative;
        top: 30vh;
        background: url('@/assets/images/login_form.png') no-repeat;
        background-size: cover;
        padding: 40px;

        h1{
            color: white;
            font-size: 40px;
        }

        h2{
            color: white;
            font-size: 20px;
            margin: 20px 0;
        }

        .login_btn{
            width: 100%;
        }
    }
}
</style>

2.2 模板封装登录业务

点击登录时，会携带用户名和密码向服务器发请求获取token，此时我们需要把token存储起来，用于后续向服务端发请求获取信息的身份验证，这里我们用pinia和loacalStroage进行存储。

安装pinia

pnpm i pinia

创建大仓库：src/store/index.ts

import { createPinia } from 'pinia'
//创建大仓库
const pinia = createPinia()
//对外暴露：入口文件需要安装仓库
export default pinia

在入口文件（main.ts）中引入并安装：src/main.ts

// 引入大仓库
import pinia from './store'
// 安装仓库
app.use(pinia)

创建小仓库：src/store/modules/user.ts

import { defineStore } from 'pinia'
// 引入接口
import { reqLogin } from '@/api/user'
// 引入类型
import type { loginForm, loginResponseData } from '@/api/user/type'
import type { UserState } from './types/type'
// 引入操作本地存储的工具方法
import { SET_TOKEN, GET_TOKEN } from '@/utils/token'
// 创建用户小仓库
const useUserStore = defineStore('User', {
    // 小仓库存储数据的地方
    state: (): UserState => {
        return {
            token: GET_TOKEN(), //用户唯一的标识token
        }
    },
    // 异步|逻辑的地方
    actions: {
        // 用户登录的方法
        async userLogin(data: loginForm) {
            // 登录请求
            let result: loginResponseData = await reqLogin(data)
            // 登录请求：成功200->token
            // 登录请求：失败201->登录失败错误的信息
            if (result.code === 200) {
                // pinia仓库存储一下token
                // 由于pinia|vuex存储数据其实利用js对象(非持久化存储)
                this.token = (result.data.token as string)
                // 本地化持久存储一份
                SET_TOKEN((result.data.token as string))
                // 能保证当前async函数返回一个成功的promise
                return 'ok'
            }
            else {
                return Promise.reject(new Error(result.data.message))
            }
        }
    },
    getters: {}
})

// 对外暴露用户小仓库
export default useUserStore

在登录页面中引入小仓库，点击登录时通知user小仓库发请求，存储token：src/views/login/index.vue

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
// 引入element-plus提示框
import { ElNotification } from 'element-plus'
// 引入用户相关的小仓库
import useUserStore from '@/store/modules/user'
let useStore = useUserStore()

// 获取路由
let $router = useRouter()
// 定义变量控制按钮加载效果
let loading = ref(false)
// 收集账号与密码的数据
let loginFrom = reactive({
    username: 'admin',
    password: '111111'
})
const login = async () => {
    // 加载效果：开始加载
    loading.value = true
    //点击登录按钮以后干什么?
    //通知仓库发登录请求
    //请求成功->首页展示数据的地方
    //请求失败->弹出登录失败信息
    try {
        // 保证登录成功
        await useStore.userLogin(loginFrom)
        // 编程式导航跳转到展示数据首页
        $router.push('/')
        // 登录成功信息提示
        ElNotification({
            type: 'success',
            message: '登录成功',
        })
        // 登录成功加载效果消失
        loading.value = false
    } catch (error) {
        // 登录失败加载效果消失
        loading.value = false
        // 登录失败的提示信息
        ElNotification({
            type: 'error',
            message: (error as Error).message
        })
    }
}
</script>

userLogin会返回一个Promise，此处可以使用try...catch...或.then来进行下一步结果处理。
不管成功或失败，都需要使登录加载效果消失，因此也可以统一写在finally里面：

try {
        // 保证登录成功
        await useStore.userLogin(loginFrom)
        // 编程式导航跳转到展示数据首页
        $router.push('/')
        // 登录成功信息提示
        ElNotification({
            type: 'success',
            message: '登录成功',
        }) 
    } catch (error) {
        // 登录失败的提示信息
        ElNotification({
            type: 'error',
            message: (error as Error).message
        })
    } finally{
        // 登录成功/失败加载效果消失
        loading.value = false
    }

2.3 用户仓库数据ts类型的定义

定义小仓库数据state类型：src\store\modules\types\type.ts

// 定义小仓库数据state类型
export interface UserState {
    token: string | null
}

登录接口返回的数据类型：src\api\user\type.ts

登录请求可能返回成功/失败的数据，因此类型需要dataType需要包括成功的数据token和失败的数据message，且是可选的，要加上"?"。

interface dataType {
    token?: string,
    message?:string
}

// 登录接口返回的数据类型
export interface loginResponseData {
    code: number,
    data: dataType
}

封装本地存储数据和读取方法：src/utils/token.js

// 存储数据
export const SET_TOKEN = (token: string) => {
    localStorage.setItem('TOKEN', token)
}

// 本地存储获取数据
export const GET_TOKEN = () => {
    return localStorage.getItem('TOKEN')
}

2.4 登录时间的判断与封装

在utils中封装一个函数：src/utils/time.js

// 封装一个函数：获取一个结果：当前早上|上午|中午|下午|晚上
export const getTime = () => {
    let time = ''
    // 通过内置的构造函数Date
    let hour = new Date().getHours()
    if (hour < 9) {
        time = '早上'
    }
    else if (hour <= 12) {
        time = '上午'
    }
    else if (hour <= 14) {
        time = '中午'
    }
    else if (hour <= 18) {
        time = '下午'
    }
    else {
        time = '晚上'
    }
    return time
}

在login组件中引入并使用

// 引入当前时间的函数
import { getTime } from '@/utils/time'
......
 
// 登录成功信息提示
ElNotification({
     type: 'success',
     message: '欢迎回来',
     title: `HI,${getTime()}好`
})

2.5 登录模块表单校验

使用element-plus的表单验证功能，步骤如下：

给el-form添加 :model="loginFrom"和:rules="rules"
给需要验证的每个el-form-item添加prop属性，如 prop="username"、prop="password"
定义表单校验需要配置对象rules
请求前使用 loginFroms.value.validate()触发表单中所有表单项的校验，保证全部的表单项校验通过再发请求

:model：要验证的表单数据对象
:rules="rules"：表单验证规则
prop：要校验字段的属性名

// 第一步：给el-form添加 :model="loginFrom"和:rules="rules"
<el-form class="login_form" :model="loginForm" :rules="rules" ref="loginFroms">

// 第二步：给需要验证的每个el-form-item添加prop属性，如 prop="username"、prop="password"
<el-form-item prop="username">
    <el-input :prefix-icon="User" v-model="loginFrom.username"></el-input>
</el-form-item>
<el-form-item prop="password">
     <el-input type="password" :prefix-icon="Lock" v-model="loginFrom.password" show-password></el-input>
</el-form-item>

// 第三步：定义表单校验需要配置对象rules
// 规则对象属性：
// required：代表这个字段必须校验
// min：文本长度至少多少位
// max：文本长度最多多少位
// message：错误的提示信息
// trigger：触发校验表单的时机，change：文本发生变化时触发校验，blur：失去焦点时触发校验
const rules = {
    username: [
        { required: true, min: 5, max: 10, message: '用户名长度应为5-10位', trigger: 'change' },
    ],
    password: [
        { required: true, min: 6, max: 10, message: '密码长度应为6-10位', trigger: 'change' },

    ]
}

第四步：请求前使用 loginFroms.value.validate()触发表单中所有表单项的校验，保证全部的表单项校验通过再发请求
// 通过ref属性获取el-form组件
let loginFroms = ref()
const login = async () => {
    // 保证全部的表单项校验通过再发请求
    await loginForms.value.validate()
    ......
}

PS：在 el-form 组件中，可以使用 ref 属性来获取表单的引用，然后调用该引用上的 validate 方法。这个方法会触发表单中所有表单项的校验，并返回一个 Promise 对象，该对象的 resolve 回调函数会在校验通过时被调用，而 reject 回调函数会在校验失败时被调用。

2.6 自定义校验表单

上面的验证比较简单，公司的开发项目中表单验证会更复杂，这个时候就要用到element-plus的自定义校验规则了。

自定义校验表单的配置项中需要一个validator属性，值是一个方法，用于书写自定义规则。

// 自定义校验规则函数
const validateUsername = (rule: any, value: any, callback: any) => {
    //rule:即为校验规则对象
    //value:即为表单元素文本内容
    //函数:如果符合条件callback放行通过即为
    //如果不符合条件callback方法,注入错误提示信息
    if(value.length >= 5){
        callback()
    }
    else{
        callback(new Error('用户名不少于5位'))
    }
}

const validatePassword = (rule: any, value: any, callback: any) => {
    if(value.length >= 6){
        callback()
    }
    else{
        callback(new Error('用户名不少于6位'))
    }
}

// 定义表单校验需要配置对象
const rules = {
    username: [
        { validator: validateUsername, trigger: 'change' },
    ],
    password: [
        { validator: validatePassword, trigger: 'change' },
    ]
}

PS：这里只是简单的示范，正式开发中大多场景的校验规则会更复杂，需要用到正则表达式来书写。

三、layout组件

3.1 layout组件的静态搭建

layout组件主页分为三部分：左侧菜单、顶部导航、内容展示区域。

在src目录下创建layout组件：src/layout/index.vue

<template>
    <div class="layout_container">
        <!-- 左侧菜单 -->
        <div class="layout_slider">左侧菜单</div>
        <!-- 顶部导航 -->
        <div class="layout_tabbar">顶部导航</div>
        <!-- 内容展示区域 -->
        <div class="layout_main">
            <p style="height: 10000px;background: red;">内容</p>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.layout_container {
    width: 100%;
    height: 100vh;

    .layout_slider {
        width: $base-menu-width;
        height: 100vh;
        background: $base-menu-background;
    }

    .layout_tabbar {
        position: fixed;
        width: calc(100% - $base-menu-width);
        height: $base-tabbar-height;
        background: $base-tabbar-background;
        top: 0px;
        left: $base-menu-width;
    }

    .layout_main {
        position: absolute;
        width: calc(100% - $base-menu-width);
        height: calc(100vh - $base-tabbar-height);
        background: $base-main-background;
        top: $base-tabbar-height;
        left: $base-menu-width;
        overflow: auto;
        padding: 20px;
    }
}
</style>

配置layout相关的样式的全局变量：src/styles/variable.scss

// 左侧菜单的宽度
$base-menu-width: 260px;
// 左侧菜单的背景颜色
$base-menu-background: #001529;
// 顶部导航的高度
$base-tabbar-height: 50px;
// 顶部导航的背景颜色
$base-tabbar-background: #ffffff;
// 内容展示区域的背景颜色
$base-main-background: #ccc8cc;

设置滚动条样式：src/styles/index.scss

// 滚动条外观设置
::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-track{
    background: $base-menu-background;
}

::-webkit-scrollbar-thumb{
    width: 10px;
    background: yellowgreen;
    border-radius: 10px;
}

3.2 Logo组件的封装

创建logo组件：src/layout/logo/index.vue

<template>
    <div class="logo" v-if="setting.logoHidden">
        <img :src="setting.logo" alt="">
        <p>{{ setting.title }}</p>
    </div>
</template>

<script setup lang="ts">
//引入设置标题与logo这配置文件
import setting from '@/setting'
</script>

<style scoped lang="scss">
.logo {
    width: 100%;
    height: $base-menu-logo-height;
    color: white;
    display: flex;
    align-items: center;
    padding: 10px;

    img {
        width: 40px;
        height: 40px;
    }

    p {
        font-size: $base-logo-title-fontSize;
        margin-left: 10px;
    }
}
</style>

配置logo相关的样式的全局变量：src/styles/variable.scss

//左侧菜单logo高度设置
$base-menu-logo-height:50px;

//左侧菜单logo右侧文字大小
$base-logo-title-fontSize:16px;

项目logo/标题配置文件：src/setting.ts

// 用于项目logo|标题配置
export default {
    title:'唧唧bong甄选运营平台', // 项目标题
    logo:'/logo.png', // 项目logo设置
    logoHidden: true // logo组件是否隐藏设置
}

3.3 左侧菜单组件

3.3.1 递归组件生成动态菜单

创建menu组件：src/layout/menu/index.vue，并在layout中引入并使用menu组件

添加二级路由：src/router/routes.ts

 {
        // 登录成功以后展示数据的路由
        path: '/',
        component: () => import('@/layout/index.vue'),
        name: 'layout',
        meta: {
            title: 'layout',
            hidden: true 
        },
        children: [
            {
                path: '/home',
                component: () => import('@/views/home/index.vue'),
                name: 'home',
                meta: {
                    title: '首页',
                    hidden: false 
                }
            }
        ]
    },

将路由数组存储到store中（方便组件访问路由数据）：src/store/modules/user.ts

// 引入路由(常量路由)
import { constantRoute } from '@/router/routes';
// 创建用户小仓库
const useUserStore = defineStore('User', {
    // 小仓库存储数据的地方
    state: (): UserState => {
        return {
            token: GET_TOKEN(), //用户唯一的标识token
            //路由配置数据
            menuRoutes: constantRoute
        }
    },
    ......
})

UserState中添加路由的类型定义：src/store/modules/types/type.ts

// 引入描述路由配置信息的类型(这个类型包含了路由的路径、组件、子路由等信息)
import type { RouteRecordRaw } from 'vue-router'
// 定义小仓库数据state类型
export interface UserState {
    token: string | null,
    menuRoutes: RouteRecordRaw[]
}

layout组件中引入小仓库获取路由数据，通过props传递给menu组件：src/layout/index.vue

<template>
    <div class="layout_container">
        <!-- 左侧菜单 -->
        <div class="layout_slider">
            <Logo></Logo>
            <!-- 展示菜单 -->
            <el-scrollbar class="scrollbar">
                <el-menu background-color="#001529" text-color="white">
                    <!-- 传递路由数据给menu组件 -->
                    <Menu :menuList="userStore.menuRoutes"></Menu>
                </el-menu>
            </el-scrollbar>
        </div>
        ......
    </div>
</template>

<script setup lang="ts">
// 引入菜单组件
import Menu from './menu/index.vue'

// 获取用户相关的小仓库
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
</script>

给每个路由添加meta元信息：src/router/routes.ts

meta: {
        title: '登录', // 菜单标题
        hidden: true // 代表路由标题在菜单中是否隐藏  true:隐藏  false:显示
      }

书写menu组件：src/layout/menu/index.vue

1. menu组件分三种情况：

没有子路由
有且只有一个子路由
有一个以上的子路由

2. 点击菜单item跳转路由（@click="goRoute"）：

<el-menu-item>标签有click事件（菜单点击时的回调函数，回调参数是el-menu-item实例。

<template>
    <template v-for="(item, index) in menuList" :key="item.path">
        <!-- 没有子路由 -->
        <template v-if="!item.children">
            <el-menu-item :index="item.path" v-if="!item.meta.hidden" @click="goRoute">
                <template #title>
                    <el-icon>
                        <component :is="item.meta.icon"></component>
                    </el-icon>
                    <span>{{ item.meta.title }}</span>
                </template>
            </el-menu-item>
        </template>
        <!-- 有且只有一个子路由 -->
        <template v-if="item.children && item.children.length == 1">
            <el-menu-item :index="item.children[0].path" v-if="!item.children[0].meta.hidden" @click="goRoute">
                <template #title>
                    <el-icon>
                        <component :is="item.children[0].meta.icon"></component>
                    </el-icon>
                    <span>{{ item.children[0].meta.title }}</span>
                </template>
            </el-menu-item>
        </template>
        <!-- 有子路由,且个数大于一 -->
        <el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path">
            <template #title>
                <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{ item.meta.title }}</span>
            </template>
            <Menu :menuList="item.children"></Menu>
        </el-sub-menu>
    </template>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
// 获取父组件传递过来的全部路由数组
defineProps(['menuList'])
// 获取路由对象
let $router = useRouter()
// 点击菜单的回调
const goRoute = (vc: any) => {
    // 路由跳转
    $router.push(vc.index)
}
</script>
<script lang="ts">
export default {
    name: 'Menu'
}
</script>

<style scoped></style>

PS：递归组件必须有一个名字，因为在vue中，组件是通过其名字进行注册和引用的。递归组件需要在自身的模板中引用自身，但如果组件没有名字，Vue无法在模板中正确地引用它，从而导致递归出现问题。

3.3.2 菜单图标完成

将element-plus图标注册成全局组件：src/components/index.ts

具体可参考官网：Icon 图标 | Element Plus (gitee.io)

// 引入elemnet-plus提供全部图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 对外暴露一个插件对象
export default {
    install(app: any) {
        // 将element-plus提供图标注册为全局组件
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
    }
}

菜单图标由路由配置决定，meta中添加 icon 字段：src/router/routes.ts

meta: {
            ......
            icon: 'Promotion', // 菜单文字左侧的图标,支持element-plus全部图标
        }

在menu中使用element-plus图标：src/layout/menu/index.vue

<el-icon>
    <component :is="item.meta.icon"></component>
</el-icon>

3.3.3 项目全部路由配置

首页重定向到home
权限管理和商品管理的一级路由用的还是组件 layout

src/router/routes.ts

// 对外暴露配置路由（常量路由）
export const constantRoute = [
    {
        // 登录
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        name: 'login',
        meta: {
            title: '登录', // 菜单标题
            hidden: true, // 代表路由标题在菜单中是否隐藏  true:隐藏  false:显示
            icon: 'Promotion', // 菜单文字左侧的图标,支持element-plus全部图标
        }
    },
    {
        // 登录成功以后展示数据的路由
        path: '/',
        component: () => import('@/layout/index.vue'),
        name: 'layout',
        meta: {
            title: 'layout',
            hidden: true,
            icon: 'Avatar',
        },
        redirect: '/home',
        children: [
            {
                path: '/home',
                component: () => import('@/views/home/index.vue'),
                name: 'home',
                meta: {
                    title: '首页',
                    hidden: false,
                    icon: 'HomeFilled',
                }
            }
        ]
    },
    {
        // 404
        path: '/404',
        component: () => import('@/views/404/index.vue'),
        name: '404',
        meta: {
            title: '404',
            hidden: true,
            icon: 'BrushFilled',
        }
    },
    {
        path: '/screen',
        component: () => import('@/views/screen/index.vue'),
        name: 'Screen',
        meta: {
            title: '数据大屏',
            hidden: false,
            icon: 'Platform',
        }
    },
    {
        path: '/acl',
        component: () => import('@/layout/index.vue'),
        name: 'Acl',
        meta: {
            title: '权限管理',
            icon: 'Lock',
        },
        children: [
            {
                path: '/acl/user',
                component: () => import('@/views/acl/user/index.vue'),
                name: 'User',
                meta: {
                    title: '用户管理',
                    icon: 'User',
                }
            },
            {
                path: '/acl/role',
                component: () => import('@/views/acl/role/index.vue'),
                name: 'Role',
                meta: {
                    title: '角色管理',
                    icon: 'UserFilled',
                }
            },
            {
                path: '/acl/permission',
                component: () => import('@/views/acl/permission/index.vue'),
                name: 'Permission',
                meta: {
                    title: '菜单管理',
                    icon: 'Monitor',
                }
            },
        ]
    },
    {
        path: '/product',
        component: () => import('@/layout/index.vue'),
        name: 'Product',
        meta: {
            title: '商品管理',
            icon: 'Goods',
        },
        children: [
            {
                path: '/product/trademark',
                component: () => import('@/views/product/trademark/index.vue'),
                name: 'Trademark',
                meta: {
                    title: '品牌管理',
                    icon: 'ShoppingCartFull',
                }
            },
            {
                path: '/product/attr',
                component: () => import('@/views/product/attr/index.vue'),
                name: 'Attr',
                meta: {
                    title: '属性管理',
                    icon: 'ChromeFilled',
                }
            },
            {
                path: '/product/spu',
                component: () => import('@/views/product/spu/index.vue'),
                name: 'Spu',
                meta: {
                    title: 'SPU管理',
                    icon: 'Calendar',
                }
            },
            {
                path: '/product/sku',
                component: () => import('@/views/product/sku/index.vue'),
                name: 'Sku',
                meta: {
                    title: 'SKU管理',
                    icon: 'Orange',
                }
            },
        ]
    },

    {
        // 任意路由
        path: '/:pathMatch(.*)*',
        redirect: '/404',
        name: 'Any',
        meta: {
            title: '任意路由',
            hidden: true,
            icon: 'Wallet',
        }
    }
]

layout右侧展示区域封装成一个组件 main（为了实现一些动画效果）：src/layout/main/main.vue

关于路由过度可参考官网：过渡动效 | Vue Router (vuejs.org)

<template>
    <!-- 路由组件出口的位置 -->
    <router-view v-slot="{ Component }">
        <transition name="fade">
            <!-- 渲染layout一级路由组件的子路由 -->
            <component :is="Component" />
        </transition>
    </router-view>
</template>

<script setup lang="ts">

</script>

<style scoped>
.fade-enter-from {
    opacity: 0;
    transform: scale(0);
}

.fade-enter-active {
    transition: all .3s;
}

.fade-enter-to {
    opacity: 1;
    transform: scale(1);
}
</style>

在layout组件中引入main：src/layout/index.vue

// 右侧内容展示组件
import Main from '@/layout/main/index.vue'

<!-- 内容展示区域 -->
<div class="layout_main">
    <Main />
</div>

3.4 顶部tabbar组件

3.4.1 顶部tabbar组件静态搭建与拆分

左侧菜单刷新折叠问题解决：src/layout/index.vue

// el-menu中新增default-active属性
<el-menu background-color="#001529" text-color="white" :default-active="$route.path">
     <!-- 根据路由动态生成菜单 -->
     <Menu :menuList="userStore.menuRoutes"></Menu>
</el-menu>

// 获取路由对象
import { useRoute } from 'vue-router'
let $route = useRoute()

tabbar组件封装：拆分成左侧面包屑组件（breadcrumb）和右侧设置组件（setting）

面包屑组件：scr/layout/tabbar/breadcrumb/index.vue

<template>
    <!-- 顶部左侧静态 -->
    <el-icon style="margin-right: 10px;">
        <Expand />
    </el-icon>
    <!-- 左侧面包屑 -->
    <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
</template>

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

<style scoped></style>

设置组件：scr/layout/tabbar/setting/index.vue

<template>
    <el-button size="small" icon="Refresh" circle></el-button>
    <el-button size="small" icon="FullScreen" circle></el-button>
    <el-button size="small" icon="Setting" circle></el-button>
    <img src="/public/logo.png" style="width: 20px;height: 20px;margin: 0 10px;">
    <!-- 下拉菜单 -->
    <el-dropdown>
        <span class="el-dropdown-link">
            admin
            <el-icon class="el-icon--right">
                <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

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

<style scoped></style>

tabbar组件：scr/layout/tabbar/index.vue

<template>
    <div class="tabbar">
        <div class="tabbar_left">
            <Breadcrumb />
        </div>
        <div class="tabbar_right">
            <Setting />
        </div>
    </div>
</template>

<script setup lang="ts">
import Breadcrumb from './breadcrumb/index.vue'
import Setting from './setting/index.vue'
</script>

<style scoped lang="scss">
.tabbar {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .tabbar_left {
        display: flex;
        margin-left: 20px;
        align-items: center;
    }

    .tabbar_right {
        display: flex;
        align-items: center;
    }
}
</style>

3.4.2 菜单折叠效果实现

定义控制折叠/展开响应式数据fold：src/store/modules/setting.ts

因为layout组件和breadcrumb组件都需要用到fold，说定义在仓库比较合适。

// 小仓库：layout组件相关配置仓库
import { defineStore } from 'pinia'

const useLayoutSettingStore = defineStore('SettingStore', {
    state: () => {
        return {
            fold: false, // 用户控制菜单折叠还是收起
        }
    }
})

export default useLayoutSettingStore

面包屑组件折叠图标切换实现：src/layout/tabbar/breadcrumb/index.vue

<template>
    <!-- 顶部左侧静态 -->
    <el-icon style="margin-right: 10px;" @click="changeIcon">
        <component :is="layoutSettingStore.fold ? 'Expand' : 'Fold'"></component>
    </el-icon>
    ......
</template>

<script setup lang="ts">
import useLayoutSettingStore from "@/store/modules/setting";
// 获取layout配置相关的仓库
let layoutSettingStore = useLayoutSettingStore()
// 点击图标的方法
const changeIcon = () => {
    // 图标进行切换
    layoutSettingStore.fold = !layoutSettingStore.fold
}
</script>

layout组件菜单折叠效果实现：src/layout/index.vue

步骤：

通过el-menu标签的collapse属性配合fold实现菜单折叠/展开效果
给左侧菜单、顶部导航、右侧内容展示区域添加动态类fold实现折叠/展开的布局改变

PS：折叠之后图标不见的问题：将icon标签放在title插槽外面

<template>
    <div class="layout_container">
        <!-- 左侧菜单 -->
        <div class="layout_slider" :class="{ fold: layoutSettingStore.fold ? true : false }">
            <Logo></Logo>
            <!-- 展示菜单 -->
            <!-- 滚动组件 -->
            <el-scrollbar class="scrollbar">
                <!-- 菜单组件 -->
                <el-menu background-color="#001529" text-color="white" :default-active="$route.path"
                    :collapse="layoutSettingStore.fold">
                    <!-- 根据路由动态生成菜单 -->
                    <Menu :menuList="userStore.menuRoutes"></Menu>
                </el-menu>
            </el-scrollbar>
        </div>
        <!-- 顶部导航 -->
        <div class="layout_tabbar" :class="{ fold: layoutSettingStore.fold ? true : false }">
            <Tabbar></Tabbar>
        </div>
        <!-- 内容展示区域 -->
        <div class="layout_main" :class="{ fold: layoutSettingStore.fold ? true : false }">
            <Main></Main>
        </div>
    </div>
</template>

<script setup lang="ts">
......
import useLayoutSettingStore from "@/store/modules/setting";
let userStore = useUserStore()
// 获取layout配置仓库
let layoutSettingStore = useLayoutSettingStore()
</script>

<style scoped lang="scss">
.layout_container {
    ......
        &.fold {
            width: $base-menu-min-height;
        }
    }

    .layout_tabbar {
        ......
        &.fold {
            width: calc(100vw - $base-menu-min-height);
            left: $base-menu-min-height;
        }
    }

    .layout_main {
        ......
        &.fold {
            width: calc(100vw - $base-menu-min-height);
            left: $base-menu-min-height;
        }
    }
}
</style>

3.4.3 顶部面包屑动态展示

通过$route.matched获取匹配的路由信息实现动态展示。
点击首页不需要展示layout路由，所以删除router.ts文件中layout路由中的元信息title和icon的值，并通过v-show判断是否展示。
通过 :to 可使点击面包屑跳转匹配路由。

src/layout/tabbar/breadcrumb/index.vue

 <!-- 左侧面包屑 -->
<el-breadcrumb separator-icon="ArrowRight">
     <!-- 面包屑动态展示路由图标与标题 -->
      <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" v-show="item.meta.title" :to="item.path">
         <!-- 图标 -->
         <el-icon>
             <component :is="item.meta.icon"></component>
         </el-icon>
         <!-- 标题 -->
         <span>{{ item.meta.title }}</span>
     </el-breadcrumb-item>
</el-breadcrumb>


// 获取路由对象
import { useRoute } from 'vue-router'
let $route = useRoute()

PS：点击商品管理、权限管理等一级路由的面包屑时，默认跳转到它的首个二级路由，因此需要在router.ts文件中给商品管理、权限管理的路由添加重定向。

redirect: '/acl/user',
redirect: '/product/trademark',

3.4.4 刷新业务的实现

刷新业务就是路由组件销毁和重建的过程。涉及顶部导航组件和内容区域组件通信，因此可以使用store存储刷新业务相关标识。

小仓库中添加刷新标识数据：src/store/modules/setting.ts

refresh: false,// 用于控制刷新效果

顶部导航setting组件实现控制下仓库refresh变化：src/layout/tabbar/setting/index.vue

// 给刷新按钮绑定点击事件
<el-button size="small" icon="Refresh" circle @click="updateRefresh"></el-button>


// 获取仓库中刷新标识
import useLayoutSettingStore from '@/store/modules/setting'
let layoutSettingStore = useLayoutSettingStore()
// 刷新按钮点击回调
const updateRefresh = () => {
    // 更新刷新标识
    layoutSettingStore.refresh = !layoutSettingStore.refresh
}

main组件中监听小仓库refresh是否变化，控制路由销毁与重建：src/layout/main/index.vue

 <component :is="Component" v-if="flag" />


import { watch, ref, nextTick } from 'vue'
import useLayoutSettingStore from '@/store/modules/setting'
let layoutSettingStore = useLayoutSettingStore()
// 控制当前组件是否销毁重建
let flag = ref(true)
// 监听仓库内部数据是否发生变化，如果发生变化，说明用户点击过刷新按钮
watch(() => layoutSettingStore.refresh, () => {
    // 点击刷新按钮：路由组件销毁
    flag.value = false
    nextTick(() => {
        flag.value = true
    })
})

3.4.5 全屏模式的切换

这里利用DOM实现全屏切换（不同浏览器可能会有兼容问题），也可以使用插件实现。

src/layout/tabbar/setting/index.vue

// 给全屏按钮绑定点击事件
<el-button size="small" icon="FullScreen" circle @click="fullScreen"></el-button>


// 全屏按钮点击回调
const fullScreen = () => {
    // DOM对象的一个属性：可以用来判断当前是不是全屏模式（全屏：true，不是全屏：false）
    let full = document.fullscreenElement
    // 切换为全屏模式
    if (!full) {
        // 文档根节点的方法requestFullscreen，实现全屏模式
        document.documentElement.requestFullscreen()
    } else {
        // 变为不是全屏模式 -> 退出全屏模式
        document.exitFullscreen()
    }
}

3.4.6 获取用户信息与token理解

发生登录请求时由后端返回的唯一标识，后续向后端发送各种请求都需要携带token，因此token作为每次请求都需带的公共参数，放在请求拦截器里，通过config配置项hearders携带最合适。

src/utils/request.ts

// 引入用户相关的小仓库
import useUserStore from '@/store/modules/user';

request.interceptors.request.use((config) => {
    // config配置对象，包括hearders属性请求头，经常给服务端携带公共参数
    let useStore = useUserStore()
    if(useStore.token){
        config.headers.token = useStore.token
    }
    // 返回配置对象
    return config;
});

home首页挂载完毕发请求获取用户信息：src/views/home/index.vue

import {onMounted} from 'vue'
// 获取仓库
import useUserStore from '@/store/modules/user';
let useStore = useUserStore()
// 目前首页挂载完毕发请求获取用户信息
onMounted(() => {
    useStore.userInfo()
})

用户小仓库：src/store/modules/user.ts

在type.ts文件中定义username、avatar类型：
username: string,
avatar: string

 // 小仓库存储数据的地方
    state: (): UserState => {
        return {
            ......
            username:'',
            avatar:''
        }
    },
    // 异步|逻辑的地方
    actions: {
        ......
        // 获取用户信息
        async userInfo(){
            // 获取用户信息进行存储仓库当中（用户头像、名字）
            let result = await reqUserInfo()
            // 如果获取信息成功，存储下用户信息
            if(result.code === 200){
                this.username = result.data.checkUser.username
                this.avatar = result.data.checkUser.avatar
            }
        }
    },

在setting组件中，通过user小仓库获取用户信息进行展示：src/layout/tabbar/setting/index.vue

 ......
<img :src="useStore.avatar" style="width: 20px;height: 20px;margin: 0 10px;border-radius: 50%;">
    <!-- 下拉菜单 -->
<el-dropdown>
    <span class="el-dropdown-link">
        {{ useStore.username }}
    </span>
        ......
</el-dropdown>


// 获取用户相关的小仓库
import useUserStore from '@/store/modules/user';
let useStore = useUserStore()

3.4.7 退出登录业务

退出登录时，需要做的事情：

需要向服务器发请求（退出登录接口）
仓库中关于用户相关的数据清空（token|username|avatar）
跳转到登录页面

src/layout/tabbar/setting/index.vue

<el-dropdown-item @click="logout">退出登录</el-dropdown-item>


// 退出登录点击回调
const logout = () => {
    // 第一件事情：需要向服务器发请求（退出登录接口）----目前还没有
    // 第二件事情：仓库中关于用户相关的数据清空（token|username|avatar）
    useStore.userLogout()
    // 第三件事情：跳转到登录页面，通过query参数传递退出登录前的路径
    $router.push({ path: '/login', query: { redirect: $route.path } })
}

封装删除token本地存储的方法：src/utils/token.ts

// 本地存储删除数据方法
export const REMOVE_TOKEN = () => {
    localStorage.removeItem('TOKEN')
}

用户小仓库：src/store/modules/user.ts

// 引入操作本地存储的工具方法
import { SET_TOKEN, GET_TOKEN, REMOVE_TOKEN } from '@/utils/token'

// 退出登录
userLogout() {
   // 目前没有mock接口：退出登录接口（通知服务器本地用户唯一标识失败）
   this.token = ''
   this.username = ''
   this.avatar = ''
   REMOVE_TOKEN()
   }

login组件添加登录前判断跳转路由的逻辑：src/views/login/index.vue

import { useRouter, useRoute } from 'vue-router'
// 获取路由对象
let $route = useRoute()

......

// 判断登录的时候，路由的路径当中是否有query参数，如果有就往query参数跳转，没有就跳转到首页
let redirect: any = $route.query.redirect
$router.push({ path: redirect || '/' })

3.4.8 暗黑模式与主题切换

暗黑模式需要在main.js文件中引入所需的样式

import 'element-plus/theme-chalk/dark/css-vars.css'

src/layout/tabbar/setting/index.vue

PS：遇到ColorPicker弹出框但是还没有选择颜色Popover就关闭的问题

解决方法：可以在el-color-picker组件加上:teleported="false"防止外部Popover关闭

<el-popover placement="bottom" title="主题设置" :width="300" trigger="hover">
    <!-- 表单元素 -->
    <el-form>
      <el-form-item label="主题颜色">
        <el-color-picker @click.stop append-to-body @change="setColor" v-model="color" size="small" show-alpha
          :predefine="predefineColors" :teleported="false" />
      </el-form-item>
      <el-form-item label="暗黑模式">
        <el-switch @change="changeDark" v-model="dark" class="mt-2" style="margin-left: 24px" inline-prompt
          active-icon="Moon" inactive-icon="Sunny" />
      </el-form-item>
    </el-form>
    <template #reference>
      <el-button size="small" icon="Setting" circle></el-button>
    </template>
  </el-popover>


import { ref } from 'vue'
//收集开关的数据
let dark = ref<boolean>(false);
//颜色组件组件的数据
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

// switch开关的chang事件进行暗黑模式的切换
const changeDark = () => {
  //获取HTML根节点
  let html = document.documentElement
  //判断HTML标签是否有类名dark
  dark.value ? html.className = 'dark' : html.className = ''
}

// 主题颜色的设置
const setColor = () => {
  //通知js修改根节点的样式对象的属性与属性值
  let html = document.documentElement
  html.style.setProperty('--el-color-primary', color.value)
}

暗黑模式使用可参考：暗黑模式 | Element Plus (element-plus.org)

主题颜色使用可参考：主题 | Element Plus (element-plus.org)

四、路由鉴权和进度条业务

路由鉴权：项目中能不能被访问的权限设置（某一个路由什么条件下可以访问，什么条件下不可以访问）。

安装nprogress插件：pnpm i nprogress

src/permission.ts

// 路由鉴权：项目中能不能被访问的权限设置（某一个路由什么条件下可以访问，什么条件下不可以访问）
import router from '@/router'
import setting from '@/setting'
import { SET_TOKEN, GET_TOKEN, REMOVE_TOKEN } from '@/utils/token'
// @ts-ignore
import nprogress from 'nprogress'
// 引入进度条样式
import "nprogress/nprogress.css"
nprogress.configure({ showSpinner: false })
// 获取用户相关的小仓库内部token数据，去判断用户是否登录成功
import useUserStore from './store/modules/user'
import pinia from './store'
let useStore = useUserStore(pinia)
// 全局守卫：项目中任意路由切换都会触发的钩子
// 全局前置守卫
router.beforeEach(async (to: any, from: any, next: any) => {
    // to：你将要访问哪个路由
    // from：你从哪个路由而来
    // next：路由的放行函数
    // 进度条开始
    nprogress.start()
    // 获取token，去判断用户登录，还是未登录
    let token = useStore.token
    // 获取用户名字
    let username = useStore.username
    // 用户登录判断
    if (token) {
        // 登录成功，不能访问login，指向home
        if (to.path == '/login') {
            next({ path: '/' })
        } else {
            // 登录成功访问其余六个路由（登录排除）
            // 有用户信息
            if (username) {
                // 放行
                next()
            } else {
                // 如果没有用户信息，在守卫这里发请求获取到了用户信息再放行
                try {
                    // 获取用户信息
                    await useStore.userInfo()
                    // 放行
                    next()
                } catch (error) {
                    // token过期：获取不到用户信息了
                    // 用户手动修改本地存储token
                    // 退出登录->用户相关的数据清空
                    useStore.userLogout()
                    next({ path: '/login' })
                }
            }
        }
    } else {
        // 用户未登录判断
        if (to.path == '/login') {
            next()
        } else {
            next({ path: '/login', query: { redirect: to.path } })
        }
    }
})
// 全局后置守卫
router.afterEach((to: any, from: any) => {
    document.title = `${setting.title} - ${to.meta.title}`
    // 进度条结束
    nprogress.done()
})

// 第一个问题：任意路由切换实现进度条业务 ---nprogress
// 第二个问题：路由鉴权（路由组件访问权限的设置）
// 全部路由组件：登录|404|任意路由|首页|数据大屏|权限管理（三个子路由）|商品管理（四个子路由）

// 用户未登录：可以访问login，其余六个路由不能访问（指向login）
// 用户登录成功：不可以访问login（指向首页）

PS：在组件的外部通过同步的语句获取仓库的数据是拿不到的。如果想获取小仓库的数据，必须先得有大仓库（pinia）。

在入口文件（main.ts）引入鉴权文件

// 引入路由鉴权文件
import './permission'

五、真实接口替换mock接口和接口ts类型定义

1. 替换各个环境下的服务器地址（ .env.development、.env.production、.env.test ）

2. 配饰代理跨域：vite.config.ts（具体配置参数可参考官网：开发服务器选项 | Vite 官方中文文档）

export default defineConfig(({ command, mode }) => {
  // 获取各种环境下对应的变量
  let env = loadEnv(mode, process.cwd())
  return {

    ......

    // 代理跨域
    server: {
      proxy: {
        [env.VITE_APP_BASE_API]: {
          // 获取数据的服务器地址设置
          target: env.VITE_SERVE,
          // 是否代理跨域
          changeOrigin: true,
          // 路径重写
          rewrite: (path) => path.replace(/^\/api/, ''),
        }
      }
    }
  }
})

3. 重新书写API接口文件及接口类型文件

src/api/user/index.ts

// 统一管理项目用户相关的接口
import request from "@/utils/request";
import type { loginFormData, loginResponseData, userInfoResponeData } from "./type"
// 项目用户相关的请求地址
enum API {
    LOGIN_URL = '/admin/acl/index/login',
    USERINFO_URL = '/admin/acl/index/info',
    LOGOUT_URL = '/admin/acl/index/logout',
}

// 暴露请求函数
// 登录接口
export const reqLogin = (data: loginFormData) => request.post<any, loginResponseData>(API.LOGIN_URL, data)
// 获取用户信息
export const reqUserInfo = () => request.get<any, userInfoResponeData>(API.USERINFO_URL)
// 退出登录
export const reqLogout = () => request.post<any, any>(API.LOGOUT_URL)

src/api/user/index.ts

// 定义用户相关数据的ts类型
// 用户登录接口携带参数的ts类型
export interface loginFormData {
    username: string,
    password: string
}

// 定义全部接口返回数据都拥有的ts类型
export interface ResponseData {
    code: number,
    message: string,
    ok: boolean
}

// 定义登录接口返回数据类型
export interface loginResponseData extends ResponseData {
    data: string
}

// 定义获取用户信息返回的数据类型
export interface userInfoResponeData extends ResponseData {
    data: {
        routes: string[],
        buttons: string[],
        roles: string[],
        name: string,
        avatar: string
    }
}

4. 修改接口相关的代码（src/store/modules/user.ts、permission.ts等文件）

唧唧bong_

关注

29
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
【Vue3+Ts项目】硅谷甄选 — 路由配置+登录模块+layout组件+路由鉴权

定义小仓库数据state类型：src\store\modules\types\type.ts// 定义小仓库数据state类型登录接口返回的数据类型：src\api\user\type.ts登录请求可能返回成功/失败的数据，因此类型需要dataType需要包括成功的数据token和失败的数据message，且是可选的，要加上"?token?:string// 登录接口返回的数据类型封装本地存储数据和读取方法：src/utils/token.js// 存储数据。
复制链接

扫一扫

专栏目录