处理受保护页面和路由的身份验证

时间:2020-07-09 14:00:43

标签: vue.js vuejs2 vue-router

我希望社区向大家介绍在向用户显示下一页之前验证用户的正确方法,以及在用户进入页面后如何进行验证。这是矫kill过正还是典型?

我正在这样使用路由器防护:

function route_guard(to, from, next) {
    document.title = to.meta.title
    if (to.meta.auth == true) {
        axios.post(api_url + /is-active)
            .then(response => {
                if (response.status == 200){
                    next();
                }
            })
            .catch(error => {
                if (error.response.status == 401){
                    next('/login');
                }
            })
    }
    else {
        next();
    }
}
{ path: '/dash', component: Dash, beforeEnter : route_guard, meta: { auth: true, title: 'Cool Dash' } }

调用/ dashboard页面一次调用的Dashboard.vue示例

 methods: {
      load_page() {
          axios.defaults.withCredentials = true;
                axios.post(this.api_url + '/dashboard')
                    .then(response => {
                        this.z = response.data
                    })
                    .catch(error => { 
                    this.response_message = error.response.data.message
                    })
    }
  }

我使用route_guard逻辑的尝试是除非经过身份验证,否则不允许任何人继续前进到下一页,但是如果授予200,则他们将移至/ dashboard。我在/dashboard VueJS页面上遇到的困难是,我正在调用/dashboard api路由来加载该VueJS页面的数据,但是我在该路由上有一个检查步骤来验证它们是否已通过身份验证。似乎有太多跃点正在这里检查用户是否有效。通过这种方法,我会在他们进入仪表板页面之前进行检查,然后在他们进入仪表板页面以加载与其帐户相关联的正确数据时再次进行检查。

/is-active路由检查其会话ID(在cookie请求中给出)是否有效,如果无效,则将其重定向回登录页面。

听起来不错吗?

0 个答案:

没有答案