CODEWITHSUNDEEP
javascriptvue.jsvuejs2
asanas
asanas

Reputation: 4280

VueJS: Automatically Redirect on Page Load

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

  1. I know how to read the link parameter from the URL. So, I'll get this.
  2. Then I have user auth data in state and I can get it in computed properties.
  3. Now, based on the user object I can determine if the user is logged in or not.
  4. 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.

Upvotes: 2

Views: 12197

Answers (3)

asanas
asanas

Reputation: 4280

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>

Upvotes: 3

channasmcs
channasmcs

Reputation: 1156

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

Upvotes: 1

Abana Clara
Abana Clara

Reputation: 4650

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.

Upvotes: 0

Related Questions