Как вы получаете доступ к магазину в рамках охраны маршрута с помощью vue SSR? - PullRequest
0 голосов
/ 21 сентября 2018

Я использую Vue + SSR в новом проекте и пытаюсь внедрить средство защиты маршрутов для обеспечения аутентификации на определенных маршрутах.Я хочу сделать что-то вроде этого:

function requireAuth(to, from, next) {

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

  ...
}

Однако я не могу просто import сохранить как в обычном приложении, так как я создаю свежий экземпляр для каждого запроса внутри функции, согласно официальным документам .

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

Есть ли способ передать магазин охраннику маршрута?Или я подхожу к этому с совершенно неправильной точки зрения?Любая помощь с благодарностью!

1 Ответ

0 голосов
/ 22 сентября 2018

Хорошо, я нашел решение, но оно не самое элегантное.Вдохновленный этим комментарием к 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 };
}

Также убедитесь, чточтобы избежать / смягчить любой код только для браузера в базовой логике.

...