Question

我正在尝试保护vue.js中的路由器。我进行用户身份验证是，如果用户未登录，则他/她将无法访问路由器。很好，但是如果以患者身份登录，如果患者尝试访问路由器以求医，它将转到医生个人资料。这意味着我的解决方案仅用于查看用户是否已登录，而不检查是否经过身份验证以访问任何其他类型的用户的路由器。请任何人提供解决方案

这是我尝试过的

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const authUser = JSON.parse(window.localStorage.getItem('authUser'));
    if (authUser && authUser.access_token) {
      next();
    } else {
      next({ name: 'login' });
    }
  }
  next();
});

共享代码 `

  beforeEnter: (to, from, next) => {
        if (authUser.role === '1') {
          next();
        }
        else {
            alert("access denied!")
            next({ path: '/${roleshash[authUser.role]}' })
        }
    }

`

Answer 1

根据以下实现，它仅检查当前用户的身份验证，而不检查授权。您需要在autheUser对象中充当角色

您可以删除阵列中所有可用的角色：

const Roles = ['doctor'，'Patient']; const authUser = {acces_token：'xxx'，角色：'Patient'};

总是空对象{}是真实的，因此我添加了

!! Object.keys（authUser）.length

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const authUser = JSON.parse(window.localStorage.getItem('authUser'));
    if (!!Object.keys(authUser).length && authUser.access_token && Roles.includes(authUser.role)) {
      next();
    } else {
      next({ name: 'login' });
    }
  }
});

此外，您还需要使用路由前的隔离区或组件保护程序来获得强大的授权来限制用户

路由器前卫

const router = new VueRouter({
  routes: [
    {
      path: '/patient',
      component: Patient,
      beforeEnter: (to, from, next) => {
        if (authUser.role === 'patient' || authUser.role === 'doctor') {
          next();
        } else {  //access denied }
      }
    }
  ]
})

组件内防护罩

const patientComponent = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    if (authUser.role === 'patient' || authUser.role === 'doctor') {
      // enter
    } else { this.$router.push('/accessDenied') }
  }
}

const doctorComponent = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    if (authUser.role === 'doctor') {
      // enter
    } else { this.$router.push('/accessDenied') }
  }
}

更新的修复程序：

const rolehash = {
1: 'admin',
2: 'doctor',
3: 'patient',
4: 'administrator'
}

您的问题是用户是否有耐心并尝试访问url localhost：8080：// doctor，它应该重定向到患者并且不应输入

让我们说auth.role是3

routes: [
    {
      path: '/doctor',
      component: Doctor,
      beforeEnter: (to, from, next) => {
        if (authUser.role  === 2) {         
           next();
        }
        else {
            next({ path: `/${roleshash[authUser.role]}` })
        }
    }
    }
  ]

您还可以在Doctor组件中尝试这种方法

import store from 'store';

beforeRouteEnter (to, from, next) {
    if (store.authUser.role  === 2) {         
           next();
        }
        else {
           next({ path: `/${roleshash[authUser.role]}` })
        }
  },

路由器导航在vue.js中无法正常工作

1 个答案: