How to not be able to access manually /login after you logged in - VueJS?

vue-authenticate example
vue-axios login
vue.js authentication tutorial
vue-router redirect if not logged in
vue router redirect after login
vuex authentication
auth::user in vue
vue authentication

I'm learning VueJS from an Udemy course. In the module about authentication, the instructor didn't make the whole process, so I had to try it by my self for 2 days but I succeeded 90%.

The backend is on firebase, so after login with correct data, I get back a token that I send it to local storage.

With the code that I make it, you can't see the dashboard if you are not authenticated(even you try the route manually), but what I don't like is that you can see the login page after you are authenticated(if you type /signin).

This last part is not normal to be. So if you are authenticated, when you try manually to go to /signin, you can.

In the router.js:

const routes = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: WelcomePage },
    { path: '/signup', component: SignupPage },
    { path: '/signin', component: SigninPage },
    { path: '/dashboard', component: DashboardPage}
  ]
});

routes.beforeEach((to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/signin', '/signup'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('token');
  console.log(loggedIn);
  if (authRequired && !loggedIn) {
    return next('/signin');
  }
  next();
});

And in store.js, inside login action:

if (localStorage.getItem('token')) {
  router.replace("/dashboard");
}

Any idea what to do to /login and /register routes after login so to not be able to see them, even you manually try these routes?

If the user will try manually /signin or /signup, I want to be redirected to /dashboard.

In my vue application I just use the router.beforeEach method with meta data plus the state of my token which I pull from my store.

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
      var token = store.getters.loggedIn;
      if (!token ) {
        next({
          path: '/login',
        })
      } else {
        next()
      }
    }else if (to.matched.some(record => record.meta.requiresVisitor)) {
      if (token) {
        next({
          path: '/',
        })
      } else {
        next()
      }
    }
})

It checks each time the route changes.

The requiresVisitor meta is something I placed in my router object

{
    // this is can only be viewed if not logged in.
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
    props: true,
    meta: {
      requiresVisitor: true,
      layout: "landing",
    },
  },
{
  // this can only be viewed if logged in.
  path: '/',
  name: 'dashboard',
  component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'),
  props: true,
  meta: {
    requiresAuth: true,
    layout: "default",
   },
  },

you can read more about route guards Here

theses methods are typically used in the entry point to the app main.js or in your router.js file.

Authentication best practices for Vue, How do I redirect the user after authentication actions (login/logout)?; How do I you are logged in (Gmail), or a view of the application without access to every If you don't want to use Vuex, no worries — we also give some code example without Vuex Token state being initialized by its local storage value, if possible. To do so you will need to have access to your WordPress hosting panel or FTP access in order to be able to edit your wp-config.php file. After adding the code and saving the changes to the file you will regain access to your WordPress site and you will be able to log in to the admin area as usual. However, this method is not the best practice.

You can add a per-route guard (https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard) to make the logic only run when /signin and /signup is matched, but if you want to keep it in the loop that runs over all routes you're on the right track -- you just need to invert your logic.

So what you want do is to add another if statement, checking if isLoggedIn is true, and that you're trying to access a public page, and in that case redirect the user to the /dashboard route.

if (!authRequired && loggedIn) {
  next('/dashboard');
  return;
}

Beginner Vue.js Tutorial with User Login, Users will be required to sign in to view the details page of an event, so we'll but as you can see in the charts above, Vue is still able to stand on its own Vue allows you to use TypeScript or even JSX if you'd like, but it's not required. Note : Press SPACE to select multiple features and ENTER once you� For example, if you can’t log into your Facebook on your smartphone, it’s possible that you’re still logged in on your desktop and vise versa. This is probably the easiest way to recover a Facebook account, since all you need to do here is manually change your password in your account’s privacy settings.

Best example of redirection using beforeEach

const routes = [
      {
        path: "/",
        name: "login",
        component: Login,
        meta:{requiresVisitor: true},
      },
      {
        path: "/dashboard",
        name: "dashboard",
        component: Dashboard,
        meta:{requiresVisitor: false},
      }];

    const router = new VueRouter({
      mode: "history",
      base: process.env.BASE_URL,
      routes
    });

export default router;

//Check the user is loged in If yes then move to next url.If not loged in so move in else and check the meta and move into next other wise is redirect my index url

router.beforeEach((to, from, next) => {
  const isLogged = JSON.parse(localStorage.getItem('username'));
    if (isLogged) next()
    else{
      if(to.meta.requiresVisitor) next()
      else next('/')
    }
})

Auth0 Vue SDK Quickstarts: Login, When you signed up for Auth0, a new application was created for you, or you field is not set, users will be unable to log in to the application and will get an error. manually type the URL into the browser and access the page if they have not� Everything should work fine. Pat yourself on the back. You have just successfully built a Vuejs 2 app and added authentication to it! Conclusion. Vuejs 2 is a lightweight, fast and awesome library for building user interfaces. Its learning curve is gentle and its API is not complex to understand.

Authentication and Protected Routes in VueJS, How to protect routes in Vue so that only logged in users can access them. your code, so if you've not done so already, you can go get it and install globally with npm: When done, open the folder (in this case “vue-auth-example”) created If you manually navigate to /login, you'll see something like this:. After typing, click on the icon located next to the password entry box and check if you have typed the correct password. Press Enter and check if you are able to login into the user profile. Step 2: If able to login, update the keyboard drivers manually from Device manager and check if the issue is resolved.

How To Set Up Vue.js Authentication and Route Handling Using vue , If you are not sure of an option, click the return key ( ENTER key) to continue We also want a way to confirm the users we authenticate when they try to We use a secret key in our config file (which we will create later) to sign the auth credentials. What happen if you manually create a key value pair jwt� After you enable logon auditing, Windows records those logon events—along with a username and timestamp—to the Security log. You can view these events using Event Viewer. Hit Start, type “event,” and then click the “Event Viewer” result. In the “Event Viewer” window, in the left-hand pane, navigate to the Windows Logs > Security.

Simple User Login in a Vue.js Web Application, Our website is made possible by displaying online advertisements to our visitors. Trying to access the page manually will result in navigation back to the login It is not absolutely necessary to use the Vue CLI, but I totally recommend it. When we are ready to sign in, the login method will be called:. If you’re using LearnDash’s customized login & registration, the button will say “Login to Enroll.” The Free access mode is a good choice if you want an administrator to manually enroll students into the course. Buy Now. The following rules apply to Buy Now courses: Must be registered/logged in to access

Comments
  • I tried your code, but I still can access /signin page after I logged in and I type manually /signin.
  • can you console.log(token) in the router.beforeEach method to see what is being checked in the if(token) condition? also did you add the meta data to your route?
  • Where do you recommend to put this router.beforeEach method: in main.js or in router.js ?
  • @dragon, I would recommend your main.js file because it will check each time the route is changed and will also make sure that users are unable to navigate to views without being logged in. also for views that can only be viewed while logged in should have meta data called requiresAuth.
  • This doesn't help me. What I want is when I am on http://localhost:8080/dashboard and I'm logged in, if I try manually http://localhost:8080/signin I want instantly to get redirected to /dashboard, because I'm logged in and is not normal to have access to that page anymore, when you are logged in.
  • Oh, I realize what you're looking for. I updated my answer.
  • Your code is good, I get redirected to /dashboard after login, I can't see the login page if I type /login, but now if I logout and I go manually to /dashboard I can see it. I tried something with beforeEnter, but doesn't work: { path: '/dashboard', component: DashboardPage, beforeEnter: (to, from, next) => { if (store.state.token) { next(); } else { next('/signin'); } } }