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

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

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

B端管理端使用vue2.0+ts开发，关于路由配置可以查看这篇文章，讲的很详细   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'

未完待续