我正在为我的应用程序尝试 websanova/vue-auth，但我不知道如何实现这两件事:

• 根据用户角色登录后重定向
• 根据用户的角色授予对某些路由的访问权限

登录后根据用户角色重定向

在我的 Login.vue 组件中，在 this.$auth.login() 中，我尝试像文档中那样使用 this.$auth.redirect() ( https://github.com/websanova/vue-auth/blob/master/docs/Methods.md#redirect ) 但我不明白它是如何工作的或如何配置它，因为 redirect.from.name 不存在并且 console.log(this.$auth.redirect () 返回 null

我尝试像这样设置 this.$auth.login() 的 redirect 参数:redirect: {name: this.$auth.user ().role == 2 ？ 'admin.dashboard' : 'dashboard'}, 但它不起作用，因为它总是重定向到仪表板。

在 this.$auth.login() 的 success() 方法中，我可以看到 this.$auth.user().role 等于 2，但我认为重定向是在获取用户之前定义的...

代码如下:

login(){ 
  var app = this 
  var redirect = this.$auth.redirect() 
  this.$auth.login({ 
    params: { 
      email: app.email, 
      password: app.password 
    }, 
    success: function () { 
      console.log(this.$auth.redirect()) // null 
      console.log(this.$auth.user().role) // 2 
    }, 
    error: function () {}, 
    rememberMe: true, 
    // try 1 
    //redirect: {name: redirect ? redirect.from.name : 'dashboard'}, 
    // try 2 
    redirect: {name: this.$auth.user().role == 2 ? 'admin.dashboard' : 'dashboard'}, 
    fetchUser: true, 
  }); 
} 

根据用户的角色授予对某些路由的访问权限

我只想授予管理员访问管理仪表板的权限。 根据文档，它可以通过这种方式完成:auth: {roles: 'admin', redirect: '/admin/login', forbiddenRedirect: '/admin/403'}

但它不起作用，我不明白如何配置。

获取的用户有一个 role 属性，设置为 2 为 admin。如何与 roles 等待值进行匹配？

谢谢

请您参考如下方法:

好吧，我昨天有点累，我通过多阅读文档找到了解决问题的方法；)

登录后根据用户角色重定向

让我们忘记吧，我完全误解了 this.$auth.redirect() 的目的。 (不是为了重定向，而是为了知道重定向是否在进行中 :p )

因此，为了在登录后根据用户的角色重定向用户，我采用了这种方式:

1/使用 loginData 防止 vue-auth 中的默认登录重定向选项

Vue.use(require('@websanova/vue-auth'), { 
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'), 
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'), 
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'), 
  loginData: {redirect: ''} 
  ... 
}) 

2/在我的 Login.vue 组件中处理重定向，在 success() 中$auth.login()的回调

this.$auth.login({ 
  params: { 
    email: app.email, 
    password: app.password 
  }, 
  success: function () { 
    // handle redirection 
    let redirectTo 
    if (redirect) { 
      redirectTo = redirect.from.name 
    } else { 
      redirectTo = this.$auth.user().role === 2 ? 'admin.dashboard' : 'dashboard' 
    } 
    this.$router.push({name: redirectTo}) 
  }, 
  error: function () {}, 
  rememberMe: true, 
  fetchUser: true, 
}) 

根据用户的角色授予对某些路由的访问权限

我只是缺少来自 Options docs 的信息: rolesVar用于告诉 vue-auth 哪个用户的属性用于角色检查的参数。

我的用户有 role属性设置为 1对于普通用户和2对于管理员。

所以我添加 rolesVar: 'role' vue-auth 选项:

Vue.use(require('@websanova/vue-auth'), { 
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'), 
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'), 
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'), 
  loginData: {redirect: ''} 
  rolesVar: 'role', 
  ... 
}) 

我这样设置我的路线:

path: '/admin', 
name: 'admin.dashboard', 
component: AdminDashboard, 
meta: { 
  auth: {roles: 2, redirect: {name: 'login'}, forbiddenRedirect: '/403'} 
}, 

我希望这会有所帮助:)