Vue + Nestjs 全栈开发，项目实战（五）：前端路由与登录拦截器

Bertha 。 2023-01-15 12:26 136阅读 0赞

> 本篇幅讲解的是，招聘管理系统-前端路由和登录拦截器

求职者端使用uniapp开发，且不登录也可以查看职位，不涉及路由和登录拦截器

B端管理端使用vue2.0+ts开发，关于路由配置可以查看这篇文章，讲的很详细   [vue2.x搭建saas项目系列之三：router配置相关][vue2.x_saas_router]

B端管理端-登录拦截相关逻辑如下

核心就是使用路由的钩子函数

permission.ts

import router from './router'
    import { Route } from 'vue-router'
    import { UserModule } from '@/store/modules/user'
    import settings from './settings'
    
    const whiteList = ['/login']
    const getPageTitle = (key: string) => {
      return `${settings.title}`
    }
    
    router.beforeEach(async(to: Route, _: Route, next: any) => {
      if (UserModule.token) {
        if (to.path === '/' || to.path === '/login') {
          next({ path: '/recruitMg/candidate/index' })
        } else {
          next()
        }
      } else {
        if (whiteList.indexOf(to.path) !== -1) {
          next()
        } else {
          next(`/login?redirect=${to.path}`)
        }
      }
    })
    
    router.afterEach((to: Route) => {
      document.title = getPageTitle(to.meta.title)
    })

main.ts

import '@/permission'

未完待续

[vue2.x_saas_router]: https://blog.csdn.net/wz_coming/article/details/112917058