Как проверить доступ охраняемой маршрутной охраны с помощью Vuejs? - PullRequest
Новая
       45

Как проверить доступ охраняемой маршрутной охраны с помощью Vuejs?

0 голосов
/ 14 октября 2019

Я реализовал средство защиты маршрута для защиты маршрута /settings с помощью метода vue-router beforeEnter().

Я пытаюсь проверить, что маршрут защищен только для администраторов .

Я использую Vuejs 2, Vue-router, Vuex и vue-test-utils.

router.js 

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    ..., // other routes
    {
      path: '/settings',
      name: 'Settings',
      component: () => import('./views/settings'),
      beforeEnter: (to, from, next) => {
        next(store.state.isAdmin);
      }
    }
  ]
});

the модульный тест : 

  test('navigates to /settings view if the user is admin', () => {
    const localVue = createLocalVue();
    localVue.use(Vuex);
    localVue.use(VueRouter);
    const router = new VueRouter();

    const wrapper = shallowMount(App, {
      stubs: ['router-link', 'router-view'],
      localVue,
      mocks: {
        $store: store
      },
      router
    });
    wrapper.vm.$route.push({ path: '/settings' });
    // test if route is set correctly
  });

вывод текущих журналов:

wrapper.vm. $ Route` не определено.

Как правильно установить приложение и получить доступ к маршрутизатору? Как я могу проверить текущий маршрут, чтобы убедиться, что администратор успешно перенаправлен?

1 Ответ

0 голосов
/ 06 ноября 2019

Спасибо логану за ссылку . Кажется, это лучшее из возможных решений:

На данный момент нет простого способа проверить навигационные устройства. Если вы хотите смоделировать запуск события, вызвав функцию router.push, вам будет трудно. Более простое решение - вызвать охранника вручную в beforeEach(), но даже в этом решении нет чистого подхода. См. Следующий пример:

beforeRouteEnter 

// my-view.js
class MyView extends Vue {
  beforeRouteEnter (to, from, next) {
    next(function (vm) {
      vm.entered = true;
    });
  }
}
// my-view.spec.js
it('should trigger beforeRouteEnter event', function () {
  const view = mount(MyView);
  const spy = sinon.spy(view.vm.$options.beforeRouteEnter, '0'); // you can't just call view.vm.beforeRouteEnter(). The function exists only in $options object.

  const from = {}; // mock 'from' route
  const to = {}; // mock 'to' route
  view.vm.$options.beforeRouteEnter[0](to, from, cb => cb(view.vm));

  expect(view.vm.entered).to.be.true;
  expect(spy).to.have.been.called;
});
...