Vue.js 使用Azure AD时的VueJS用户权限

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

My HomeController正在使用授权方法，该方法强制所有用户使用其Ad凭据登录

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

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

授权服务的任何好例子

StartUP.cs

.AddMvc();
        services.AddAuthorization(options =>
        {

    }

HomeController示例

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

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

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

---

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

看这里：

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

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

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

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

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

<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;
  }
}