vuex - 如何使用 vue SSR 访问路由守卫内的商店？

Question

我在一个新项目中使用 Vue + SSR，我正在尝试实现一个路由保护来强制对某些路由进行身份验证。我想做这样的事情：

function requireAuth(to, from, next) {

  if(!store.auth.getters.authenticated){
  // redirect to login
  }

  ...
}

但是，我不能import像在普通应用程序中那样简单地存储商店，因为根据官方文档，我正在为函数内部的每个请求创建一个新实例。

export function createRouter () {
  return new Router({
  ...
  });
}

有没有办法将商店传递给路线守卫？或者我是从完全错误的角度来的？任何帮助是极大的赞赏！

Answer 1

好的，我找到了一个解决方案，但它不是最优雅的。受到GitHub 上这条评论的启发...

 # router/index.js
createRouter(store) {

  const router = new Router({
    mode: "history",
    routes: [
      {
        path: "/some-protected-route",
        beforeEnter: requireAuth.bind(store)
      }

    ...
  });

  return router;
}

...

requireAuth(to, from, next) {
  const store = this;

  if(!store.getters["auth/authenticated"]) { ... }
}

并且不要忘记将 store 传递给 createRouter 函数：

# app.js

export default function createApp() {

  const store = createStore();
  const router = createRouter(store);

  sync(store,router)

  const app = new Vue({
    router,
    store,
    render: h => h(App)
  });

  return { app, router, store };
}

还要确保在底层逻辑中避免/减轻任何仅浏览器的代码。