vue.js - 如何在 Vuejs 中测试受保护的路由保护的访问?
问题描述
/settings
我用 vue-router 方法实现了一个路由保护来保护路由beforeEnter()
。
我尝试测试该路由是否仅受管理员保护。
我正在使用 Vuejs 2、Vue-router、Vuex 和 vue-test-utils。
路由器.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);
}
}
]
});
单元测试:
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` 未定义。
如何正确挂载App并访问路由器?如何测试当前路由以验证管理员用户是否已成功重定向?
解决方案
感谢洛根的链接。这似乎是最好的解决方案:
到目前为止,还没有简单的方法来测试导航守卫。如果你想通过调用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;
});
推荐阅读
- python - karatsuba的整数乘法算法python
- r - 更改 R 中蜂群图中一个元素的颜色
- python-3.x - 在 matplotlib 中定义子图时如何使用循环?
- javascript - 如何在 CSS 中减少一列并增加另一列?
- c# - 数据源的类型无效。它必须是 IListSource、IEnumerable 或 IDataSource。绑定数据时包含以下错误
- javascript - 如何在 TypeScript 中使用对象作为默认导出声明模块
- reactjs - 在 ASP.NET Core 中下载文件时抛出错误,状态码为 400
- spring-boot - Kubernetes集群中如何正确配置环境?
- java - 如何返回要查看的html内容?
- beautifulsoup - 如何使用xpath从网页获取href值