Laravel + Vue JS:未经许可阻止访问页面

时间:2018-01-28 06:04:50

标签: javascript php laravel vue.js

我对我的项目有点担心,因为我依赖于本地存储。如果有人知道如何操纵它并改变auth令牌以外的东西我会把用户的角色和权限登录到localstorage的网站。假设有人将['accounting']更改为['accountings'],然后在我的代码中{I} if(userDetails.roles === 'accounting'),以便他们现在可以查看其他页面不适合他们。我实际上曾经尝试使用导航防护,但是如果这个用户是否为这个角色,我觉得在服务器端检查每个请求真的很麻烦。这是什么最好的做法?

这是我目前做的事情

if(to.matched.some(record=>record.meta.checkRolePermission)){
    const obj = {
    allowOnlyFor : to.meta.allowOnlyThisRoles
    }
    axios({
        url: '/prod/api/checkuserrolespermission',
        method: 'post',
        data: obj,
        config: 'JSON'
    })
    .then(response=>{
        if(response.status == 200){
            if(response.data.result === 'allowed'){
                next();
            }else{
                next({
                    path:'/prod'
                });
            }
        }
    })
    .catch(response=>{
        next({
            path:'/prod'
        });
    })
}

1 个答案:

答案 0 :(得分:1)

  

我实际上曾尝试使用导航防护装置,但感觉如此   如果这个用户是,我真的很难检查服务器端的每个请求   对于那些角色与否。这是什么最好的做法?

如果用户访问敏感信息,则应始终检查用户的每个请求的角色。使用像:

这样的中间件这样做非常简单
// CheckRole.php
public function handle($request, $next, $role)
{
    return auth()->check() && auth()->user()->hasRole($role) ? $next($request) : abort(403);
}

// kernel.php
protected $routeMiddleware = [
...
    'check-role': CheckRole::class
...
]

// routes/web.php
Route::get('accounting/sensitive-data', 'AccountingController@sensitiveData')->middleware('check-role:accountant');

永远不要相信您的客户处理您的所有授权/身份验证。服务器是你的最后一道防线,可以说,它应该尽可能紧密安全。

所有这一切,当然可以限制客户端路由访问 - 假设您正在构建SPA。使用vue-router导航防护来检查角色。这是一个很好的教程:

https://medium.com/@manojkumar_88220/role-based-authentication-using-vue-js-2-f54e18498019