持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第22天,点击查看活动详情
后台项目 Express-Mysql-Vue3-Ts-Pinia 前端路由处理
引言
通过之前一段时间 Express 和 Mysql 的学习
这里尝试来搭建一个 后台系统 来巩固下学习的技术。
前端路由处理
主要完成的任务就是,如果我们访问根路由时,如果此时没有 token 的话,也就是没有登录。或者是 token 过期时,将其跳转到 登录页面。
目录结构
首先在 src 文件夹下创建一个 router 文件夹
- router/
- index.ts // 主要进行路由的设置
- routerGuards.ts // 路由的守卫处理
index.ts 文件内容
引入相关的模块
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
创建路由合集 routes
export const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Layout',
redirect: '/workbench',
component: () => import(/* webpackChunkName: "layout" */ '@/views/layout/index.vue'),
meta: {
title: '首页'
},
children: [
{
path: '/workbench',
name: '/workbench',
component: () => import(/* webpackChunkName: "workbench" */ '@/views/workbench/index.vue'),
meta: {
name: '工作台'
}
}
]
},
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue')
meta: {
title: '登录'
},
}
]
创建 router 实例,并且采用 history 模式
const router = createRouter({
history: createWebHistory(''),
routes
})
最终导出 router 实例,供外部使用
export default router
到这里看似完成,实际我们还需要在主入口文件 main.ts 中进行路由的使用。
app.use(router)
到这里还是不能体现我们上面的需求。
此刻就需要我们 vue-router 中的 路由守卫来进行帮助
这里推荐使用的是 前置路由守卫 - router.beforeEach
下面是核心的处理逻辑
const { get: getStorage } = useStorage()
const allowList = ['login'] // 设置白名单
router.beforeEach((to, from, next) => {
const token = getStorage(ACCESS_TOKEN)
console.log(token, 'token')
if (token) {
if (to.name === 'login') {
next({ path: 'workbench' })
} else {
next()
}
} else {
if (allowList.includes(to.name as string)) {
// 在白名单,直接进入
next()
} else {
next({ path: '/login', query: {}, replace: true })
}
}
})
useStorage 中的 get 方法是一个自己封装的一个获取本地存储值的代码。
进行代码的一个解释:
-
首先设置白名单数组 allowList,来进行使用
-
去本地的 localstorage 查找是否存在 token 值
-
如果不存在
判断我们访问的路由,是否在白名单中
-
如果在白名单中,那么直接进行 next(),来进入。
这里注意,next(),是直接进入 to 所指的路由。
-
如果 访问的路由 不在白名单中,那么就跳转到登录路由
-
-
如果存在
判断我们访问的路由,是否是 登录路由
-
如果是,那么直接跳转到 工作台
-
否则,进入 url 访问的页面(这里还没有进行错误页面的处理。)
-
-
总结
通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目,这里进行前端方面路由的处理。