如何向Vue.js AWS-amplify应用程序添加身份验证持久性

Question

我正在尝试为Vue.js应用程序构建一个AWS-Amplify身份验证页面。到目前为止，我已经成功地使用aws-amplify和aws-amplify-vue插件实现了登录/注销模块。我还在router.js中实现了一个路由守卫，以防止未经授权的访问。然而，我遇到了一个问题，在登录后，即使我仍然登录到应用程序中，单击浏览器中的后退箭头也会返回到登录菜单。在我之前使用Firebase构建的应用程序中，我通常会向main.js (入口点文件)添加.onAuthStatechanged()方法来处理身份验证持久性，如下所示：

let app = ''

firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
  }
})

AWS Amplify或aws-amplify-vue插件中有类似的方法吗？如果没有，有没有关于如何实现身份验证持久性的建议？有没有办法配置路由守卫来处理这个问题？请看我下面的路由守卫：

router.beforeResolve((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    let user;
    Vue.prototype.$Amplify.Auth.currentAuthenticatedUser().then(data => {
      if (data && data.signInUserSession) {
        user = data;
      }
      next()
    }).catch((e) => {
      next({
        path: '/'
      });
    });
  }
  next()
})

Answer 1

根据awsamplify文档，您可以使用一个名为onAuthUIStateChanged的函数，该函数可以在创建时调用以检查AuthState，如果它是"signedIn“，则只需将路由器推送到主视图。这将是Login.Vue视图中的函数。

import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components`;

export default {
  name: 'Login',
  created() {
    onAuthUIStateChange((nextAuthState, authData) => {
      if (nextAuthState === AuthStatus.SignedIn) {
          console.log('user successfully signed in!');
          this.$router.push('/profile');
        }
      if (!authData) { console.log('user is not signed in');
        }
     });
   }