vue-router#Router TypeScript Examples

useLogin = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (user: Ref<unknown>, rememberMe?: boolean) => {
    loading.value = true
    return new Promise<{ user: Record<string, unknown>, token: string }>((resolve, reject) => {
      setTimeout(() => {
        resolve({
          user: {
            email: '[email protected]',
            roles: []
          },
          token: 'token'
        })
      }, 1000)
    }).then((res) => {
      result.value = res
      const { user, token } = res
      setUser(user)
      // setHeader() -- e.g. axios.defaults.headers.common.Authorization = `Bearer ${token}`
      setTokenCookie($q, token, rememberMe)
      return res
    }).catch((res: unknown) => {
      if (res === '401') return verificationRequiredDialog($q, {}, lang)
      if (res === '403') return invalidCredentialsDialog($q, {}, lang)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}

useLogout = ({ router }: { router: Router}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()

  const logout = () => logoutDialog($q, {
    onOk: () => router.push('/')
  }, lang)

  return logout
}

useRegister  = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (user: Ref<unknown>) => {
    loading.value = true
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('200')
      }, 1000)
    }).then((res: unknown) => {
      result.value = res
      return res
    }).catch((res: unknown) => {
      if (res === '403') return invalidDataDialog($q, {}, lang)
      if (res === '409') return alreadyRegisteredDialog($q, {}, lang)
      return registrationErrorDialog($q, {}, lang)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}

usePasswordForgot = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (user: Ref<unknown>) => {
    loading.value = true
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('200')
      }, 1000)
    }).then((res: unknown) => {
      result.value = res
      checkEmailDialog($q, {
        onOk: () => router?.push('/login')
      }, lang)
      return res
    }).catch((res: unknown) => {
      return unknownEmailDialog($q, {}, lang)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}

usePasswordReset = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (user: Ref<unknown>, token: string) => {
    loading.value = true
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('200')
      }, 1000)
    }).then((res: unknown) => {
      result.value = res
      passwordResetSuccessDialog($q, {
        onOk: () => router?.push('/login')
      }, lang)
      return res
    }).catch((res: unknown) => {
      console.error(res)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}

useVerify = ({ router }: { router?: Router} = {}) => {
  /**
   * Replace with your own function
   */
  const $q = useQuasar()
  const lang = useLang()
  const loading = ref(false)
  const result = ref()
  const fetch = (token: string) => {
    loading.value = true
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('200')
      }, 1000)
    }).then((res: unknown) => {
      result.value = res
      verificationSuccessDialog($q, {
        onOk: () => router?.push('/login')
      }, lang)
      return res
    }).catch((res: unknown) => {
      return verificationFailedDialog($q, {}, lang)
    }).finally(() => {
      loading.value = false
    })
  }

  return { result, loading, fetch }
}

function changeTitleGuide(router: Router) {
  router.beforeEach((to, from, next) => {
    const title = to.meta.title as string
    document.title = title
    next()
  })
}

export function setupRouter(i18n: I18n): Router {
  const locale = getLocale(i18n)

  // setup routes
  const routes: RouteRecordRaw[] = [
    {
      path: '/:locale/',
      name: 'home',
      component: Home
    },
    {
      path: '/:locale/about',
      name: 'about',
      component: About
    },
    {
      path: '/:pathMatch(.*)*',
      redirect: () => `/${locale}`
    }
  ]

  // create router instance
  const router = createRouter({
    history: createWebHistory(),
    routes
  })

  // navigation guards
  router.beforeEach(async to => {
    const paramsLocale = to.params.locale as string

    // use locale if paramsLocale is not in SUPPORT_LOCALES
    if (!SUPPORT_LOCALES.includes(paramsLocale)) {
      return `/${locale}`
    }

    // load locale messages
    if (!i18n.global.availableLocales.includes(paramsLocale)) {
      await loadLocaleMessages(i18n, paramsLocale)
    }

    // set i18n language
    setI18nLanguage(i18n, paramsLocale)
  })

  return router
}

export function setRouteGuard (
  { router, loggedIn, fetchUser, checkUserRoles }:
  { router: Router, loggedIn: (requiredRoles?: string[]) => boolean, fetchUser: (requiredRoles?: string[]) => Promise<void>, checkUserRoles: (record: string[]) => boolean }
  ){
  router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.find(record => record.meta.requiresAuth)?.meta.requiresAuth
    const requiredRoles = to.matched.find(record => record.meta.requiredRoles)?.meta.requiredRoles
    const unauthenticatedRouteLocation = to.matched.find(record => record.meta.unauthenticatedRouteLocation)?.meta.unauthenticatedRouteLocation
    const unauthorizedRouteLocation = to.matched.find(record => record.meta.unauthorizedRouteLocation)?.meta.unauthorizedRouteLocation

    // const checkAuthorization = () => {
    //   if (!loggedIn()) {
    //     return fetchUser().then(() => {
    //       if (!loggedIn()) return next('/')
    //       if (requiredRoles && checkUserRoles && !checkUserRoles(requiredRoles)) return next({ name: 'account' })
    //       return next()
    //     }).catch(() => {
    //       return next('/')
    //     })
    //   }
    //   if (requiredRoles && checkUserRoles && !checkUserRoles(requiredRoles)) return next({ name: 'account' })
    //   next()
    // }

    if (requiresAuth) {
      if (!loggedIn(requiredRoles)) {
        return fetchUser(requiredRoles).then(() => {
          if (!loggedIn(requiredRoles)) return next(unauthenticatedRouteLocation || '/')
          if (requiredRoles && checkUserRoles && !checkUserRoles(requiredRoles)) return next(unauthorizedRouteLocation || { name: 'account' })
          return next()
        }).catch(() => {
          return next(unauthenticatedRouteLocation || '/')
        })
      }
      if (requiredRoles && checkUserRoles && !checkUserRoles(requiredRoles)) return next(unauthorizedRouteLocation || { name: 'account' })
    }

    next()
  })
}