vue SSR를 사용하여 루트 가드 내의 스토어에 어떻게 액세스합니까?

vue SSR를 사용하여 루트 가드 내의 스토어에 어떻게 액세스합니까?

새로운 프로젝트에서 Vue + SSR를 사용하고 있으며 특정 경로에서 인증을 시행하기 위해 루트 가드를 구현하려고 합니다.나는 다음과 같은 것을 하고 싶다.

function requireAuth(to, from, next) {

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

  ...
}

하지만 간단하게는 할 수 없다.import공식 문서에 따라 함수 내에서 각 요청에 대해 새로운 인스턴스를 생성하기 때문에 일반 앱에서와 같이 스토어를 할 수 있습니다.

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

루트 가드에게 가게를 넘겨줄 방법이 있나요?아니면 제가 완전히 잘못된 각도에서 접근하고 있는 건가요?아무쪼록 잘 부탁드립니다!

좋아, 해결책을 찾긴 했지만 가장 우아한 방법은 아니야이 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 };
}

또한 기본 로직에서 브라우저 전용 코드를 피하거나 완화하십시오.

언급URL : https://stackoverflow.com/questions/52447289/how-do-you-access-the-store-within-a-route-guard-with-vue-ssr