重定向到请求的URL（如果已在VueJS路由器中授权）

我试图通过以下方式理解VueJS路由器模型。如果您试图打开直接链接，即使您已经登录并授权，应用程序也会将您重定向到主页。为什么会这样？如何打开请求的URL

auth guard.js

import {store} from '../store'

export default (to, from, next) => {
  if (store.getters.user) {
    next()
  } else {
    next('/signin')
  }
}

    Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup
    },
    {
      path: '/signin',
      name: 'Signin',
      component: Signin
    },
    {
      path: '/meetups',
      name: 'Meetups',
      component: Meetups,
      beforeEnter: AuthGuard
    },
    {
      path: '/meetup/new',
      name: 'CreateMeetup',
      component: CreateMeetup,
      beforeEnter: AuthGuard
    },
    {
      path: '/meetups/:id',
      name: 'Meetup',
      props: true,
      component: Meetup,
      beforeEnter: AuthGuard
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      beforeEnter: AuthGuard
    }
  ],
  mode: 'history'
})

index.js

import {store} from '../store'

export default (to, from, next) => {
  if (store.getters.user) {
    next()
  } else {
    next('/signin')
  }
}

    Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup
    },
    {
      path: '/signin',
      name: 'Signin',
      component: Signin
    },
    {
      path: '/meetups',
      name: 'Meetups',
      component: Meetups,
      beforeEnter: AuthGuard
    },
    {
      path: '/meetup/new',
      name: 'CreateMeetup',
      component: CreateMeetup,
      beforeEnter: AuthGuard
    },
    {
      path: '/meetups/:id',
      name: 'Meetup',
      props: true,
      component: Meetup,
      beforeEnter: AuthGuard
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      beforeEnter: AuthGuard
    }
  ],
  mode: 'history'
})

---

如果商店

user

为空，则

auth guard.js

会将某人重定向到登录页面

商店用户何时更新？

main.js内部：

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.$store.dispatch('autoSignIn', user)
  }
})

onAuthStateChanged方法是异步的，这意味着在您要求浏览器转到由

auth guard.js

保护的页面后，它可能会完成执行

如果您打开一个新的选项卡或窗口并键入受保护页面的url，通常会发生这种情况。 如果先将站点完全加载到一个非防护页面（比如说/signin），然后用户尝试单击一个防护页面（比如/meetups），这种行为将正常工作。当用户单击链接时，

onAuthStateChanged

方法很有可能已返回并提交到存储（

this.$store.dispatch（'autoSignIn'，user）

），从而允许

onAuthStateChanged

正确执行

编辑

解决此问题的一种方法是，仅在

onAuthStateChanged

返回如下用户时，才实例化Vue应用程序：

main.js

firebase.initializeApp({
    apiKey: 'AIzaSyCFYWd6FpR53u4hSPXQSjOYeZNPF1FxG2M',
    authDomain: 'yt-devmeetup.firebaseapp.com',
    databaseURL: 'https://yt-devmeetup.firebaseio.com',
    projectId: 'yt-devmeetup',
    storageBucket: 'gs://yt-devmeetup.appspot.com'
})
firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        store.dispatch('autoSignIn', user)
        store.dispatch('fetchUserData')
    }
    new Vue({
        el: '#app',
        router,
        store,
        render: h => h(App),
        created() {
            this.$store.dispatch('loadMeetups')
        }
    })
})

---

你能显示你的

store.js

文件的内容吗？是的，你是说这个吗？你怎么知道你已经被授权了

store.getters.user

-这是否返回值？给定此链接-如果您已登录，您应该导航到请求的url，否则您应该导航到登录页面。是的，它返回用户ID：“ID”：“1234567890”-知道重定向发生的原因吗？您在SPA中使用带

模式：历史记录的Vue路由器，并且您应该已经在后端设置了重定向规则（apache、iis等），然后在浏览器的地址栏中键入一个url，如
https://example.com/meetups 
，它将重新链接到
index.html
或您已经设置的任何一个。感谢您的解释，但是我需要在代码中做什么更改才能让授权用户进入直接链接而不被重定向到index.html？我有e使用可能的解决方案更新答案：仅在Firebase身份验证回调后实例化Vue应用程序。