Vue的路由器导航gaurd

我在vuex store.js使用来自集中式状态管理 vuex我的登录状态存储为像下面Vue的路由器导航gaurd

export const store = new Vuex.Store({ 
state: { 
loggedIn: false, 
userName: 'Guest', 
error: { 
    is: false, 
    errorMessage: '' 
} 
}, 
getters: { 
g_loginStatus: state => { 
    return state.loggedIn; 
}, 
g_userName: state => { 
    return state.userName; 
}, 
g_error: state => { 
    return state.error; 
} 
} 
)};

当我在用户登录设置一个布尔值loginstatus为true，并删除登录按钮，并用注销按钮取代一切工作正常，但问题是当用户登录，如果我直接在搜索栏中输入登录组件的路径，我可以导航到登录页面我想抢先此行为如果使用已登录并搜索登录页面的路径他必须被重定向到主页

我在登录组件使用beforeRouteEnter尝试，但我们没有接取到这个实例，因为该组件没有加载所以，我怎样才能检查搜索栏从我的商店的登录状态

我在login.vue脚本

script> 

export default{ 
    data(){ 
     return{ 
      email: '', 
      password: '' 
     }; 
    }, 
    methods: { 
     loginUser(){ 
      this.$store.dispatch('a_logInUser', {e: this.email, p: this.password}).then(() =>{ 
       this.$router.replace('/statuses'); 

      }); 
     } 
    }, 
    beforeRouteEnter (to, from, next) { 
     next(vm => { 
      if(vm.$store.getters.g_loginStatus === true){ 
       //what shall i do here 
      } 
     }) 
    } 
}

来源

2017-03-17 rv krish

您可以将用户重定向到主页或其他一些相关页面：

mounted() { 
     if(vm.$store.getters.g_loginStatus === true){ 
      this.$router('/') 
     } 
} 
beforeRouteEnter (to, from, next) { 
    next(vm => { 
     if(vm.$store.getters.g_loginStatus === true){ 
      next('/') 
     } 
    }) 
}

从docs：

下一个：功能：该功能必须调用解决了钩。该动作取决于提供给下一个参数：

next（）：移动到管道中的下一个挂钩。如果没有挂钩，则导航被确认。

next（false）：中止当前导航。如果浏览器的网址被更改（无论是由用户手动还是通过返回按钮），它将被重置为源自路由的URL。

next（'/'）or next（{path：'/'}）：重定向到不同的位置。当前的导航将被中止，并将启动一个新的导航。

来源

2017-03-17 15:08:07 Saurabh

我试过这种方法有时,,,,它的工作原理，但有时登录页面被打开，如果我直接在搜索进入登录页面的URL。 –

@VamsiKrishna尝试我编辑的代码，添加挂载块。 – Saurabh

尝试添加挂载的钩子，但现在我按登录按钮后没有什么happpens，url更改时，我clivck其他路由器的链接，但页面停留在登录页 –

Vue的路由器导航gaurd

回答

相关问题