vue router - redirect after successfull authentication-CodePudding

I have a vue app which uses the vue router. I implemented an authentication system for the login routes. How do I get it to redirect automatically to the route the user initially wanted to visit after login was successfull?

This is my code

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import Home from "../views/Home.vue";
import Collections from "../views/Collections.vue";
import Login from "../views/Login.vue";
import store from "../store/index";

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
  {
    path: "/",
    name: "Home",
    component: Home,
  },

  {
    path: "/collections",
    name: "Collections",
    component: Collections,
    //meta: { requiresAuth: true }
  },
];

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

router.beforeEach((to, from, next) => {
  if (!store.getters.isAuthenticated && to.name !== "Login") {
    next("/login");
  } else {
   next();
  }
});

export default router;

CodePudding user response：

Use cookie storage

this.cookieUrl = this.$route.query.redirecturl
if (this.cookieUrl) {
  cookieStorage.setItem('redirecturl', this.cookieUrl, false, 2000000)
}

and after login check cookie

 if (cookieStorage.getItem('redirecturl')) {
            this.$router.push({
              path: cookieStorage.getItem('redirecturl')
            })
cookieStorage.removeItem('redirecturl')

CodePudding user response：

The plain and simple approach which could work in that case is simply redirecting back to previous route after successful login.

$router.go(-1)

CodePudding user response：

Your best option is to initially redirect the person to the login page with a parameter that specifies the original page. Something like:

if(!loggedIn) {
  // If not authenticated, add a path where to redirect after login.
  this.$router.push({ name: 'login', query: { source_path: '/current_route' }});
}

(you can optionally use this.$route.query.page in place of an explicit /current_route string).

Then in the login page have a method that uses the parameter if set, or falls back to the homepage:

this.$router.push(this.$route.query.source_path || '/')

CodePudding user response：

Instead of just calling next('/login'), you can additionally pass the route that users want to visit as a query parameter, like this:

next({
    path: '/login',
    query: {
       redirect: to.fullPath,
    }
})

Then, in the login page, after the successful authentication, you can call

this.$router.replace(this.$route.query.redirect || '/');

It will redirect users to the page they initially want to visit, or to home if there is no information about redirection.