通过使用 AngularJS 和 Web API 的权限隐藏菜单元素

Question

我已经使用 OWIN 在我的 Web API RESTfull 服务中实现了基于角色的授权。

根据用户的角色隐藏菜单项或按钮的最佳方法是什么？我想隐藏用户无权访问的项目。

更新

我想知道我的控制器的最佳做法是什么。

这是我想要的一个示例，但我认为这不是正确的方法。其次，路由失败是因为它无法区分这两个动作。

[Authorize(Roles = "SomeRole")]
public class FooController : ApiController
{
    [HttpGet]
    public string HelloWorld()
    {
         return "Hello world - you are authorized";
    }

    [HttpGet]
    [Route("hasaccess")]
    [AllowAnonymous]
    public bool HasAccess()
    {
         return User.IsInRole("SomeRole");
    }
}

http://localhost:8080/api/foo/ --> 调用 HelloWorld()

http://localhost:8080/api/foo/hasaccess --> 调用 HasAccess()

Answer 1

你可以使用 ng-if 指令。仅当 hasRole 函数返回 true 时，它​​才会呈现此 div。

<div ng-if="hasRole('admin')"> 
                  Admin menu item
</div>

然后在控制器里有一个函数

$scope.hasRole = function(role){
    //check if user has needed Role
    //return true or false
}