Question

我正在使用Vue-CLI和名为JSO的客户端OAuth 2.0 JavaScript库构建SPA。它使用HTML 5.0 localStorage缓存访问令牌。

在我的完整应用中，除以下问题外，所有其他功能均正常运行：

当用户首次到达我的应用程序时，他可以快速浏览该应用程序，然后自动重定向到第三方身份验证登录屏幕。我不希望这种“快速浏览” -我需要让用户在看到我的应用程序的任何部分之前，立即将其重定向到第三方登录页面。

所以，我想我会像这样使用Vue-Router设置 Global Before Guards ：

来自：Main.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      requiresAuth: true
    }
  },

    ...more routes...and they all require auth...
]

router.beforeEach((to, from, next) => {
  const token = window.localStorage.getItem('my-token-example')
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    if (token == null) {
      client.getToken()
      next(false)
    }
  } else {
    next()
  }
})

new Vue({
  created: function() {
    //check for response parameters if user has an auth token (uses JSO plugin)
    //if token received, then it is stashed into localStorage
    client.callback()
  },
  render: h => h(App),
  router: router
}).$mount('#app')

示例App.vue：

<template>
    <div id="app">
     <Header />
    <routerView />
   </div>
</template>

client.callback()上的信息：

当用户返回应用程序时，我会捕获标题响应

client.getToken()上的信息：

我得到了令牌有效载荷

注意：JSO auth文档状态： “您还可以确保令牌在应用程序的早期可用，以强制所有用户交互和重定向在应用程序完全加载之前发生。为此，请调用getToken，并等待回调，然后再继续。< / p>

要记住，在使用getToken（）之前，始终调用callback（）函数来处理来自OAuth服务器的响应，否则，您将最终进入redirect_loop“

在将用户重定向到auth登录站点之前，是否有人对我如何防止用户看到我的应用程序有任何建议？更新：我认为我看到了问题...全局防护措施是否仅影响<RouterView />组件中应用程序的部分？因此，在重定向之前，我们是否看到了应用程序的标题和横幅？

Answer 1

我解决了这个问题。我只需要对v-if文件进行app.vue，例如：<div v-if="token !== null>

这会隐藏应用模板，直到收到令牌为止。

如何防止访问者在重定向之前看到应用程序？

1 个答案: