Question

在routes的{{1}}数组中，我已经设置

main.js

除meta : { requiresAuth: true }页上的每个组件之外的其他组件。

关于导航分辨率，我对每条路线进行了如下检查：

UserLogin

使用此设置，一切几乎都能按预期/预期的方式工作。登录的用户可以去任何地方，匿名用户将被重定向到router.beforeEach((to, from, next) => { const currentUser = firebase.auth().currentUser; const requiresAuth = to.matched.some(record => record.meta.requiresAuth); const currentUserState = !!currentUser; console.table({ currentUserState, requiresAuth }); if (requiresAuth && !currentUser) { next('/login'); } else { next(); } }。

但是，此检查和重定向仅在用户通过单击Web应用程序中的链接进行导航时起作用（所有链接localhost/login都<router-link>。

当任何用户（注册或匿名用户）尝试通过键入或复制粘贴网址来在应用程序中导航时，应用程序将自动将其发送到登录页面。

从console.table输出中，我看到手动输入url总是导致currentUserState为false。

它不会一直为假：登录（:to="{ name: 'SomeComponent' }"）的用户然后手动导航到某个地方（currentUserState === true），其currentUserState === false会恢复为{{1} }

我只能模糊地猜测该问题与渲染和currentUserState有关。

Answer 1

firebase.initializeApp(config)

// you need to let firebase try and get the auth state before instantiating the 
// the Vue component, otherwise the router will be created and you haven't 
// resolved whether or not you have a user

firebase.auth().onAuthStateChanged(function(user) {
    app = new Vue({
      el: '#app',
      template: '<App/>',
      components: { App },
      router
    })
});

Answer 2

我找到了解决该错误的方法。

在我的Vuex store.js中，状态的快照存储在localStorage中。只要存储本身发生更改，便会更新此快照，因此localStorage备份始终与Vue.js应用程序本身的实际状态保持最新。

store.subscribe((mutation, state) => {
  localStorage.setItem('store', JSON.stringify(state));
});

此store.subscribe设置在我的store.js中，紧靠导出行。

在商店中还定义了一个名为initStore的函数

initStore(state) {
  if (localStorage.getItem('store')) {
    this.replaceState(Object.assign(state, JSON.parse(localStorage.getItem('store'))));
  }
},

，在我的商店对象之后，立即使用调用 store.commit('initStore')。

手动输入URL后的Vue.js身份验证

2 个答案: