Права пользователя VueJS при использовании Azure AD

Question

Я работаю над приложением Vue Js с Netcore 2.0 и Azure AD для аутентификации, я уже добавляю аутентификацию в свое приложение и использую авторизацию, чтобы разрешить доступ к различным контроллерам моего API.

[Authorize(Policy = "basusers")]

Мой HomeController использует метод Authorize, который заставляет всех пользователей входить в систему с использованием своих учетных данных.

Мой вопрос из моего приложения 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();
    }
}

Пример Router 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
}},

Итак, осталось сделать «авторизованный»'true или false, на основе результата запроса авторизации.Вы также можете управлять свойствами:

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

Это приведет к отключению кнопки, если для параметра «authorised» не задано значение «true».Членство в группе вы можете использовать вычисляемое свойство, вместо этого:

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