后台项目 Express-Mysql-Vue3-TS-Pinia 前端路由处理

225 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第22天,点击查看活动详情

后台项目 Express-Mysql-Vue3-Ts-Pinia 前端路由处理

引言

通过之前一段时间 ExpressMysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

前端路由处理

主要完成的任务就是,如果我们访问根路由时,如果此时没有 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 做出一个 后台系统 项目,这里进行前端方面路由的处理。