Vue.JS 스마트 로그인 리디렉션

누군가가 소셜 미디어를 스크롤하다가 귀하의 웹사이트에서 흥미로운 기사에 대한 링크를 발견했다고 상상해 보십시오. 그래서 그는 그것을 보기 위해 그것을 클릭합니다. 그러나 그는 로그인하지 않았기 때문에 귀하의 웹사이트에서 그를 로그인 페이지로 리디렉션했습니다. 그러나 로그인 후 그는 홈페이지로 리디렉션되었습니다. 이제 그는 해당 기사 페이지로 수동으로 다시 이동해야 합니다. 그러나 이것은 좋은 UX가 아닙니다.
로그인한 후 귀하의 웹사이트는 그가 온 페이지로 다시 리디렉션해야 합니다. 어떻게 하는지 봅시다.
다음과 같이 사용자를 리디렉션하는 대신 라우터 가드에서 좋습니다.

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

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

쿼리 매개변수로 사용자가 있던 페이지와 함께 로그인 페이지로 사용자를 리디렉션합니다.

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

이제 사용자를 홈 페이지로 리디렉션하는 대신 사용자가 로그인한 후의 로그인 페이지입니다.

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

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

redirect 쿼리 매개변수가 있는지 확인하고, 있으면 이를 사용하여 사용자가 원래 있던 페이지로 다시 보낼 수 있습니다.

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

내 다른 기사를 확인하십시오

.ltag__user__id__728097 .follow-action-button {
배경색: #000000 !중요;
색상: #ffffff !중요;
테두리 색상: #000000 !중요;
}

슈보 팔로우

Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace

도움이 되었습니까? Patreon에서 저를 지원해주세요