Компонент загружается до запуска пакета аутентификации - PullRequest
Новая
       85

Компонент загружается до запуска пакета аутентификации

0 голосов
/ 19 июня 2020

У меня проблема. У меня есть основное приложение с некоторыми маршрутами. 

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

Я также создал свой собственный пакет auth. Мне это нравится. 

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
      }])

И метод Login внутри моего пакета: 

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, а номер части сценария

Я думаю, что это работает так: приложение запускается , он загружает приложение. vue и с зарядом мой путь '/' и мой компонент 'component2', теперь, как и маршрут, изменен, мой пакет запускается, и я перенаправляюсь на свою страницу / Connexion. После этого компонент снова отображается, но не сценария.

Видите ли вы какое-нибудь решение, которое я могу реализовать в своем пакете, чтобы перезагрузить js внутри приложения?

Вот что Я пробовал: Показывает пакет.

Пробовал использовать 2. 1 для пакета, другой для моего приложения. Это решение может работать, но я должен вызвать do: this. $ Router.replace ({path: '/ Connexion'}) И он показывает сообщение в моей консоли: 

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

Я действительно хочу обработать это важно внутри моего пакета, я не хочу слишком сильно менять поведение моего приложения.

...