VueJS: автоматическое перенаправление при загрузке страницы

Question

У меня есть приложение Vue, и когда пользователь заходит на определенную страницу, я хочу автоматически перенаправить на внешнюю страницу. Я не уверен, как это сделать.

Например:

http://localhost:3000/redirecting/?link=http://externalsite.com

1. Я знаю, как прочитать параметр ссылки из URL. Итак, я возьму это.
2. Тогда у меня есть данные аутентификации пользователя в состоянии, и я могу получить их в вычисляемых свойствах.
3. Теперь на основе объекта пользователя я могу определить, вошел ли пользователь в систему или нет.
4. Если он не вошел в систему, перенаправьте на страницу входа Если пользователь вошел в систему, перенаправьте на внешнюю ссылку (это проблемная область).

Обратите внимание, что здесь нет щелчка или чего-либо еще. Как только пользователь заходит на эту страницу, перенаправление должно произойти. Еще лучше, если мы покажем сообщение «Перенаправление ...» на секунду.

Обновление: я использую Nuxt / Vue.

Answer 1

вы можете сделать с Navigation Guards .Вам не нужно никаких файлов просмотра.просто используйте файл маршрута

const router = new VueRouter({
  routes: [
{
  path: '/foo',
  component: Foo,

  beforeEnter: (to, from, next) => {
    // check link param exit using route param method
     if (link exit) {
          //  window.location.href =   add redirtect url
      } else {
        next()
      }
  }
}
 ]
})

Answer 2

Пользовательская маршрутизация в NUXT также работала. Но я пошел по следующему методу. Это также помогло мне посеять сообщение «Redirecting ...» за секунду до перенаправления.

<template>
<div>
  <p>Redirecting...</p>
</div>
</template>

<script>
export default {
  mounted () {
    const user = this.$store.state.auth.user
    if (user !== null) {
      if (this.$route.query.link) {
        window.location.href = this.$route.query.link
      } else {
        window.location.href = '' // Some default link
      }
    } else {
      window.location.href = '' // login page
    }
  }
}
</script>

Answer 3

Вы должны будете выполнить проверку сразу после загрузки страницы. Теперь, каким бы ни был ваш алгоритм входа в систему, у вас определенно должен быть способ получить доступ к этому состоянию на внешнем интерфейсе.

function getLoginStatus(){
     //do something, get login status from server whatsoever

     return status; //boolean
}

function redirect(){
    const url = window.location.search.split("?link=")[1];
    const externalurl = 'https://foo.com';
    //get url, parse, etc etc

    //check login status
    if(getLoginStatus()){
         window.location.href = externalurl;
    }
    else {
         window.location.href = 'login.html';
    }
}

window.onload = function(){
    redirect();
}

Теперь все, что вам нужно сделать, это организовать это так, чтобы оно соответствовало вашему VUE-коду или любой структуре кода, которую вы используете. Вы можете использовать маршрут или что-то. Я сам даже не использовал бы Vue для обработки этого, поскольку это не имеет ничего общего с пользовательским интерфейсом.