路由保护vue3中的参数（路由，来自，下一个）类型

【问题标题】：Arguments (route, from, next) types within route guard vue3路由保护vue3中的参数（路由，来自，下一个）类型
【发布时间】：2021-05-06 10:02:29
【问题描述】：

我导出一个函数，我将它传递给router.beforeEach：

export default function (route, from, next) {
  log.debug(route.path)

  if (!identity.state.authenticated) {
    log.debug('redirecting to "login" view...')
    next({ name: 'login' })
  } else {
    next()
  }
}

但这会导致 3 个 TypeScript 错误：

TS7006: Parameter 'route' implicitly has an 'any' type.
TS7006: Parameter 'from' implicitly has an 'any' type.
TS7006: Parameter 'next' implicitly has an 'any' type.

什么类型最适合这些人？我可以让它们只是对象，但没有一些类型可以从vue 导入吗？

【问题讨论】：

标签： typescript vue.js vuejs3

【解决方案1】：

router.beforeEach 是typed as：

beforeEach(guard: NavigationGuardWithThis<undefined>): () => void

而NavigationGuardWithThis 是typed as：

export interface NavigationGuardWithThis<T> {
  (
    this: T,
    to: RouteLocationNormalized,
    from: RouteLocationNormalized,
    next: NavigationGuardNext
  ): NavigationGuardReturn | Promise<NavigationGuardReturn>
}

所以你需要从vue-router导入这些类型：

RouteLocationNormalized
NavigationGuardNext
我不知道如何导入NavigationGuardReturn，但既然是includes void，在TypeScript 中省略返回也是可以接受的。

import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'

export default function(
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext
) {
  /*...*/
}

【讨论】：