Vue.js умные редиректы

Запоминаем последний маршрут пользователя, чтобы перенаправить его обратно на страницу входа, на примере авторизации.

Представьте, что кто-то просматривает социальную сеть и находит ссылку на интересную статью на вашем сайте, поэтому он нажимает на нее, чтобы увидеть. Но пользователь не был авторизован, поэтому ваш сайт перенаправил его на страницу входа. Но после входа пользователь был отправлен редиректом на домашнюю страницу. Итак, теперь ему нужно вернуться на страницу со статьей вручную. Это плохой UX.

После входа в систему ваш сайт должен был перенаправить его обратно на страницу, с которой он пришел. По типу:

blog/hello-world     // первый контакт
auth/login           // пользователь логинется
blog/hello-world     // редирект на первоначальную страницу

Вместо того, чтобы просто перенаправлять пользователя вот так:

const isLoggedIn = () => {
    return localStorage.getItem('token')
}

const protectedRoutes = [
    "app",
    "admin",
]
router.beforeEach((to, from, next) => {
    const isProtected = protectedRoutes.includes(to.name)
    if(isProtected && !isLoggedIn()){
        next({
            path: '/login'
        })
    }else next()
})

Мы перенаправим пользователя на страницу входа, а в параметр запроса поместим страницу, на которой он был до перехода на auth/login.

if(isProtected && !isLoggedIn()){
    next({
        path: '/login',
        query: { redirect: to.fullPath }
    })
}

Пример ниже это старая логика, где пользователя перекидывало на главную после того, как он входят в систему:

<template>
    <button @click="login">Login</button>
</template>

<script>
export default {
    methods: {
        login() {
            localStorage.setItem('token', '12345')
            this.$router.push({ path: "/" })
        }
    }
}
</script>

Теперь же мы можем добавить параметр запроса на редирек и если он есть, тогда мы сможем использовать его для отправки пользователя обратно на страницу, с которой он пришел на логин. Метод login теперь будет выглядеть вот так:

login() {
    localStorage.setItem('token', '12345')
    if(this.$route.query.redirect) {
        this.$router.push(this.$route.query.redirect)
    }else{
        this.$router.push('/')
    }
}