Vue路由器在更改路线后使组件保持活动状态

时间:2019-05-02 16:04:12

标签: vue.js vuejs2 firebase-authentication vue-router

我要路由/home/profile

/profile路由应该是私有的,只有经过身份验证的用户才能访问

我正在使用firebase/auth和路由卫士来实现这一目标

那是路由器代码

const router = new Router({
    path: '/',
    name: 'home',
    component: Home
},
{
    path: '/profile',
    name: 'profileSettings',
    component: ProfileSettings,
    beforeEnter: authGuard
},
{
    path: '/auth',
    name: 'auth',
    component: Auth
})

function authGuard(from, to, next) {
    firebase.auth().onAuthStateChanged(user => {
        if (user) {
            next()
        } else {
            next('/auth')
        }
    })
}

注销代码

logout() {
    firebase.auth().signOut().catch(error => {
        console.error(error)
    })
}

调用注销功能的模板代码

<a href='#" @click.prevent="logout">Logout</a>

我转到/profile之后返回/home,并且注销重定向发生在auth页面上

0 个答案:

没有答案