Question

我在一个新项目上使用Vue + SSR，并且试图实现路由防护以对某些路由实施身份验证。我想做这样的事情：

function requireAuth(to, from, next) {

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

  ...
}

但是，我不能像普通应用程序那样简单地import商店，因为我正在根据the official docs在函数内部为每个请求创建一个新实例。

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

有什么方法可以将商店传递给路线守卫吗？还是我从完全错误的角度出发？任何帮助将不胜感激！

Answer 1

好的，我找到了一个解决方案，但这并不是最优雅的方法。受this comment on 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"]) { ... }
}

别忘了将商店传递给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 };
}

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

您如何通过vue SSR访问位于路由守卫中的商店？

1 个答案: