How to show MVC logged in username with AngularJs

I am using MVC 5 / WebApi 2 and AngularJs. I want to display the Logged in username in my view. I know how to display that information using razor but how can I do it with Angular? So basically I need to do this with Angular.

<span >Logged In As: @Html.ActionLink(User.Identity.GetUserName(), "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage", @style = "color:white;float:right" })</span>

apiUserController

 public class apiUserController : ApiController
{
    // GET api/<controller>
    public List<ApplicationUser> Get()
    {
        using (var context = new ApplicationDbContext())
        {
            List<ApplicationUser> users = new List<ApplicationUser>();
            users = context.ApplicationUsers
                .ToList();
            return users;
        }

    }
}

Updated

 public IHttpActionResult Get()
    {

        using (var context = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(new ApplicationDbContext())))
        {

            var user = context.FindById(User.Identity.GetUserId());
            var loggedInUser = user.UserName;
            return Ok(loggedInUser);
        }

    }

you'll need to create a service that returns your user information

angular.module('app').factory('Authentication', function ($resource) {
    var resource = $resource('/user', {}, {
        query: {
            method: 'GET',
            cache: true
        }
    });
    return resource.get().$promise;
});

* note that you'll need to create and endpoint that will send you the user data as json using web api

once you got it done you'll be able to use it in any controller (let's assume you have a homecontroller, it could be a headercontroller or any other)

angular.module('app').controller('HomeController', ['$scope', 'Authentication', function ($scope, Authentication) {
    $scope.authentication = Authentication;
}]);

then use it in your view like:

<span >Logged In As: {{authentication.user.username}} </span>

EDIT:

your api controller as you suggested could be like

public HttpResponseMessage Get()
    {
        var userId = getCurrentUserId(); //something like that
        using (var context = new ApplicationDbContext())
        {
            ApplicationUser user = new ApplicationUser();
            user = context.ApplicationUsers.SingleOrDefault(x=>x.id==userId);
            return user;
        }

    }

try to read http://www.asp.net/web-api/overview/formats-and-model-binding/json-and-xml-serialization

for routing try to read this article (I guess you are using web api 2)

http://www.asp.net/web-api/overview/web-api-routing-and-actions/attribute-routing-in-web-api-2

Chris

If you want to cheat a little, you can do this in <head> in your _Layout:

<script type="text/javascript">
    (function(myApp) {
        myApp.username = "@User.Identity.GetUserName()";
        //optional
        myApp.otherStuff = "@moreMvcStuff";
    })(window.myApp = window.myApp || {});
</script>

Then start your angular app like this:

(function (myApp) {
    "use strict";

    //var app = set up your angular app

    app.run(["$rootScope",
        function ($rootScope) {
            $rootScope.appSettings = {
                username: myApp.username
            };
        }
    ]);     

})(window.myApp = window.myApp || {});

What you are doing is creating a single value on the window called myApp (or name it whatever you like) and passing it into your IIFE. This gives you access to it inside your angular script, bot only in that on block. So if you want it to stick around, you need to put it in a service or your rootScope.

In the app.run block, you can stick it in your rootScope or wherever you want it.

Now in your views you can display it with {{appSettings.username}}.

I call this "cheating" because it's specifically for MVC or webforms and it's not the "angular way". If you ever migrated to a fully agnostic html/js client (no asp.net mvc) and web APIs, you'd need to do what is in the currently-accepted answer.

来源：https://stackoverflow.com/questions/26239071/how-to-show-mvc-logged-in-username-with-angularjs

标签

asp.net-mvc

angularjs

asp.net-identity