Question

我有一个问题。我的主要应用程序有一些路由。

{
      path: '/route1/component1',
      name: 'component1',
      component: component1,
      meta: {
        public: false
      }
    },
    {
      path: '/',
      name: 'Home',
      component: component2,
      meta: {
        public: false
      }
    }

我还创建了自己的身份验证包。对我来说很好。

const guard = (to, from, next) => {
        //if (!this.isAuthenticated && !(to.name.localeCompare('alloha-auth-connexion') < 1)){
        if (!this.isAuthenticated && to.name != 'alloha-auth-connexion' && to.name != 'alloha-auth-modification'){
          payload.router.replace({name: 'alloha-auth-connexion'})
          next('/Connexion')
        } else{
          next()
        }
      }
      payload.router.beforeEach(guard)

      // Route d'entrée
      payload.router.addRoutes([{
        path: '/Connexion',
        name: 'alloha-auth-connexion',
        component: Connexion
      },
      {
        path: '/Modification',
        name: 'alloha-auth-modification',
        component: Modification
      },
      {
        path: '/Redirect',
        name: 'alloha-auth-redirect',
        component: Redirect
      }])

方法和登录包中的方法：

async login() {
        if (this.$refs.form.validate()) {
          const param = {login: this.identifiant, motDePasse: this.password}
          const reponse = await service.Login(param)
          if(reponse.status === 200) {
            // On vérifie par rapport au login et par rapport au matricule, puisque l'on peut se connecter avec les deux
            if(reponse.data.login.trim() === param.login.toLowerCase().trim() || parseInt(reponse.data.matricule) == param.login.trim()){
              alloha.isAuthenticated = true
              const user = reponse.data
              alloha.authentificationSuccess(user)
              this.$router.push({path: '/'})
            } 
          } else {
            alert(this.localeUser.IdentifiantOuMdpIncorrect)
            alloha.authentificationError()
          }
        }
      },

因此，当我向我的应用程序收费时，就会加载我的保护程序，就像我未通过身份验证一样，我将重定向到/ Connexion页面，当我单击“登录”按钮时，它会触发“登录”功能，如果成功后，我将从主应用程序（'/'）重定向到基本路径。效果很好。

因此，这是主应用程序中的问题，组件'component2'加载模板，脚本并进行一些api调用。但是，当我成功通过身份验证时，它不会重新充电js，因此呈现了html，但是脚本部件号为

。

这是我认为的工作方式：该应用程序启动后，将加载App.vue并加载我的路径“ /”和我的组件“ component2”，现在就像更改路线，我的包触发器一样，我将重定向到我的/ Connexion页面。之后，再次渲染该组件，但没有脚本部分。

您看到我可以在我的程序包中实现以重新加载应用程序内js的任何解决方案吗？

这是我尝试过的：它显示在包装上。

我尝试使用2。 1个用于包装，另一个用于我的应用。这种解决方案可以工作，但是我必须打电话给do：this。$ router.replace（{path：'/ Connexion'}）它在我的控制台中显示一条消息：

Error: Avoided redundant navigation to current location: "/Connexion".

我确实想在我的包裹中处理此事，我不想改变我的应用程序的行为方式。

在身份验证程序包启动之前加载组件

0 个答案: