VueJS user permissions when using Azure AD

Question

I'm working on a Vue Js Application with Netcore 2.0 and Azure AD for Authentication, I already Add Authentication to my app and I'm using authorization to allow access to to the different controllers of my API.

My HomeController is using the Authorize method which forces all users to log in using their Ad Credentials.

My Question from my Vue app how can I say

If this user is in X group not show this option on the menu or do not allow access to this view.

Any good examples of an Authorization service.

StartUP.cs

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

    }

HomeController Example

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

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

Router JS Example (How can I filter if the user is not "basusers" not show admin menu and not give access.)

    export const routes = [
 nent: Application }
     ]

rickb · Accepted Answer · 2018-12-05 19:30:58Z

You can control routing conditionally using navigation guards.

Look here: https://router.vuejs.org/guide/advanced/navigation-guards.html

On a given page, Vue template elements are controlled by the 'v-if' statement, which points either to a data item in your script or to a computed property:

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

in your script, e.g.:

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

So, what's left to do is to set 'authorized' to true or false, based on the authorization query result. You can control properties, as well:

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

This would disable the button unless 'authorized' is true. Group membership you might want to use a computed property, instead:

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

Script:

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

Collectives™ on Stack Overflow

VueJS user permissions when using Azure AD

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related