保护整个VueJs应用程序，直到获得认证

编程问答 2022-06-12

问题描述

我正在尝试保护我的整个应用程序，直到用户通过身份验证为止。我正在使用Auth0来管理我的用户，并遵循他们的SPA quickstart guide，同时使用其他各种参考为打字稿进行调整。我在应用程序加载后后正在工作，并且尝试导航到另一个页面，但是我需要它要求用户在访问该应用程序之前登录。 / p>

这似乎是由于将身份验证添加为插件而导致的，直到应用程序初始化后才能完全初始化。我想我需要一种方法来阻止应用程序初始化，直到身份验证插件准备就绪。

在这里，我将其作为插件包含在main.ts中

Vue.use(Auth0Plugin,{
  domain,clientId,onRedirectCallback: (appState: any) => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    );
  }
});

我的vue-router索引中有这个全局防护。j

router.beforeEach(async (to,from,next) => {
  if (to.Meta.allowUnauthenticated === true) {
    next();
  } else {
    authGuard(to,next);
  }
});

这是authGuard.ts的样子：

import { getInstance } from './auth'
import { NavigationGuard } from 'vue-router'

export const authGuard: NavigationGuard = (to,next) => {
  const authService = getInstance()

  const fn = () => {
    // Unwatch loading
    unwatch && unwatch()

    // If the user is authenticated,continue with the route
    if (authService.isAuthenticated) {
      return next()
    }

    console.log(authService.isAuthenticated);

    // Otherwise,log in
    authService.loginWithRedirect({ appState: { targetUrl: to.fullPath } })
  }

  // If loading has already finished,check our auth state using `fn()`
  if (!authService.loading) {
    return fn()
  }

  // Watch for the loading property to change before we check isAuthenticated
  const unwatch = authService.$watch('loading',(loading: boolean) => {
    if (!loading) {
      return fn()
    }
  })
}

我尝试在main.ts和App.vue等各个地方添加手表

root.$auth.$watch("loading",loading => {
  if (loading === false) {
      root.$auth.loginWithRedirect({});
  }
});

即使将new Vue(..)包裹在手表上似乎也不起作用。好像$watch似乎没有按照其预期的那样工作。当我有下面的代码时，页面只是空白。

import {Auth0Plugin,getInstance} from './auth'

Vue.use(Auth0Plugin,onRedirectCallback: (appState: any) => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    );
  }
});

const instance = getInstance();

instance.$watch("loading",loading => {
  console.log("waiting...");
  if (!loading) {
    new Vue({
      router,render: h => h(App)
    }).$mount('#app')
  }
});

我尝试过的每件事都遇到了相同的问题，应用程序在Auth0插件完全初始化之前就初始化了。我已经尝试了其他类似问题中的一些解决方案，但是在我的情况下似乎没有任何效果。我将非常感谢对此的任何指导。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

auth0authenticationtypescripttypescriptvue.js