我正在为我的应用尝试websanova / vue-auth,但我不知道如何实现这两件事:
在我的Login.vue组件的this.$auth.login()
中,我尝试像在文档(https://github.com/websanova/vue-auth/blob/master/docs/Methods.md#redirect)中一样使用this.$auth.redirect()
,但我不了解它的工作方式或配置方式,因为redirect.from.name
不存在,而console.log(this.$auth.redirect()
返回null
我尝试像这样设置redirect
的{{1}}参数:this.$auth.login()
,但是由于它总是重定向到仪表板,所以它不起作用。
在redirect: {name: this.$auth.user().role == 2 ? 'admin.dashboard' : 'dashboard'},
的{{1}}方法中,我可以看到success()
等于this.$auth.login()
,但是我认为重定向是在获取用户之前定义的。 / p>
这是代码:
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,
});
}
属性,对于admin设置为auth: {roles: 'admin', redirect: '/admin/login', forbiddenRedirect: '/admin/403'}
。如何与role
等待值进行匹配?
谢谢
答案 0 :(得分:2)
好的,昨天我有点累,我发现了如何通过多读一些文档来解决我的问题;)
忘了我完全误解了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 /在success()
的{{1}}回调中的Login.vue组件中处理重定向
$auth.login()
我只是从Options docs中丢失了一个信息: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,
})
参数,该参数用于告诉vue-auth哪个用户的属性用于角色检查。
我的用户将rolesVar
属性设置为普通用户role
,将1
属性设置为管理员。
所以我将2
添加到vue-auth选项:
rolesVar: 'role'
我将路线设置为:
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',
...
})
我希望这会有所帮助:)