javascript - 路线变更的工兵事件

Question

如果用户未通过身份验证，我需要将用户重定向到登录页面。我需要像 route.beforeEach 这样的东西在 Vue.js 中，理想情况下:

sapper.beforeRouteChange((to, from, next) => {

  const isAuth = "[some session or token check]";

  if (!isAuth) {
    next('/login')
  }

  next()
})

我找到了 Sapper - protected routes (route guard)这个问题，但我认为这还不足以满足我的需求。如果 token 或身份验证在运行时发生变化怎么办？或者它是否被 react 性覆盖？

编辑 1:我认为 this Sapper GitHub 上的问题解决了我的问题。

Answer 1

所以我把这段代码放到/src/routes/_layout.svelte :

  import AuthMiddleware from "../methods/authMiddleware.js";
  import { goto, stores } from '@sapper/app';
  const { page } = stores();

  if (typeof window !== "undefined" && typeof document !== "undefined") {
    page.subscribe(({ path, params, query }) => {
      const from = window.location.pathname;
      const redirect = (href) => { goto(href); }

      AuthMiddleware.beforeChange(from, path, redirect, params, query);
    })
  }

这是 authMiddleware.js文件:

export default class AuthMiddleware {

  static beforeChange(from, to, redirect, params, query) {

    if (!AuthMiddleware._isUserAuthenticated()) {
      redirect("/login");
    }
  }

  // ~

  static _isUserAuthenticated() {
    return true; // TODO: Implement
  }
}

有关路由 Hook 的更多信息，请参见此处

https://github.com/sveltejs/sapper/issues/30

https://sapper.svelte.dev/docs/#Stores