VueJS: Automatically Redirect on Page Load

Question

I have a Vue application and when a user visits a specific page, I want to auto-redirect to an external page. I am not sure how to do that.

For example:

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

I know how to read the link parameter from the URL. So, I'll get this.
Then I have user auth data in state and I can get it in computed properties.
Now, based on the user object I can determine if the user is logged in or not.
If he is not logged in, redirect to the login page. If user is logged in, redirect to the external link (This is the problem area).

Note that there is no click or anything. As soon as a user visits this page, the redirect should happen. Even better if we can show a message 'Redirecting...' for a second.

Update: I am using Nuxt/Vue.

asanas · Accepted Answer · 2018-09-10 03:06:56Z

3

The custom routing inNuxt also worked. But I went with the following method. This also helped me sow the 'Redirecting...' message for a second before 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>

answered Sep 10, 2018 at 3:06

asanas

4,29015 gold badges52 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

channasmcs Over a year ago

this is not the best programming practise your redirection run after mount page

Richard Franek Over a year ago

@channasmcs and maybe you could say where to run it so that it's proper? Please edit your comment

channasmcs · Accepted Answer · 2018-09-07 03:56:57Z

1

you can do with Navigation Guards . you don't need to you any view file. just use route file

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

answered Sep 7, 2018 at 3:56

channasmcs

1,15612 silver badges28 bronze badges

4 Comments

asanas Over a year ago

I like this method. Actually, I am using Nuxt along with Vue. Is it possible to use it like this?

channasmcs Over a year ago

@asanas nuxt is vue js base SSR framwork nuxtjs.org/guide/routing this is methods

asanas Over a year ago

you're right. But in Nuxt, routes are generated automatically based on the page tree. You don't define them explicitly. That's why I was asking where will I write this method in Nuxt?

channasmcs Over a year ago

@asanas you can easily create custom route in nuxt js medium.com/@francesco.greppi/…

Potato Salad · Accepted Answer · 2018-09-07 03:54:30Z

0

You will have to execute the check immediately after the page has loaded. Now, whatever your login algorithm maybe, you should definitely have a way to access this status on the front end somehow.

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();
}

Now all you have to do is organize this so that it fits your vue code or whatever code structure you are employing. You can use route or something. I myself wouldn't even use Vue to handle this since this has nothing to do with the user interface.

answered Sep 7, 2018 at 3:54

Potato Salad

4,6603 gold badges22 silver badges33 bronze badges

1 Comment

channasmcs Over a year ago

actually, rout redirect need fire before mount page

Collectives™ on Stack Overflow

VueJS: Automatically Redirect on Page Load

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related