使用Azure AD时的VueJS用户权限

Question

我正在使用Netcore 2.0和Azure AD进行身份验证的Vue Js应用程序，我已经在我的应用程序中添加身份验证，并且我正在使用授权来允许访问我的API的不同控制器。

[Authorize(Policy = "basusers")]

我的HomeController使用Authorize方法强制所有用户使用他们的Ad Credentials登录。

我的Vue应用程序的问题怎么说呢

如果此用户在X组中，则不在菜单上显示此选项或不允许访问此视图。

任何授权服务的好例子。

StartUP.cs

public void ConfigureServices(IServiceCollection services)
    {
        services.AddAuthentication(sharedOptions =>
        {
            sharedOptions.DefaultScheme = 
         CookieAuthenticationDefaults.AuthenticationScheme;
            sharedOptions.DefaultChallengeScheme = 
         OpenIdConnectDefaults.AuthenticationScheme;
        })
        .AddAzureAd(options => Configuration.Bind("AzureAd", options))
        .AddCookie();

        services.AddMvc();
        services.AddAuthorization(options =>
        {
            options.AddPolicy("FacultyStaffOnly", policy => 
            policy.RequireClaim("groups", "a1f5b403- 
          9be903c60eed", "2a-d1ebd10d8d54"));                                
        });
    }

HomeController示例

//[Microsoft.AspNetCore.Authorization.Authorize]
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    public IActionResult Error()
    {
        return View();
    }
}

路由器JS示例（如果用户不是“basusers”，我如何过滤不显示管理员菜单而不提供访问权限。）

    export const routes = [
    { name: 'InquiryForm', path: '/', component: InquiryForm, display: 
    'Home', 
    icon: 'home' },
    { name: 'AdminInquiry', path: '/AdminInquiry', component: AdminInquiry, 
   display: 'Admin', icon: 'list' },
    { name: 'Profile', path: '/Profile/:lastName', component: Profile },
    { name: 'Application', path: '/Application', component: Application }
     ]

Answer 1

您可以使用导航警卫有条件地控制路由。

看这里：https://router.vuejs.org/guide/advanced/navigation-guards.html

在给定页面上，Vue模板元素由'v-if'语句控制，该语句指向脚本中的数据项或计算属性：

<template>
  <div v-if="authorized">User authorized</div>
</template>

在你的脚本中，例如：

data: function() { return {
  authorized
}},

那么，剩下要做的是根据授权查询结果将'authorized'设置为true或false。您还可以控制属性：

<template>
  <button @click="..." :disabled="!authorized">Go Authorized</button>
</template>

这将禁用按钮，除非'授权'为真。您可能希望使用计算属性的组成员身份：

<template>
  <button @click="..." :disabled="inGroup('group1')">Group 1 Members</button>
</template>

脚本：

data: function() {return {
  myGroups: ['group1', 'group2']
}},
computed: {
  function inGroup(queryGroup) {
    return queryGroup in groups;
  }
}