如何显示使用AngularJs登录的MVC用户名 [英] How to show MVC logged in username with AngularJs

问题描述

我正在使用MVC 5/WebApi 2和AngularJs.我想在我的视图中显示登录用户名".我知道如何使用剃刀显示该信息，但是如何使用Angular来显示呢?所以基本上我需要使用Angular来做到这一点.

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

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

    }
}

已更新

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

*请注意，您需要创建并终结点，以便使用网络API将用户数据作为json发送给您

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

一旦完成，就可以在任何控制器中使用它(假设您有一个homecontroller，它可以是headercontroller或任何其他控制器)

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>

您建议的api控制器可能类似于

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

    }

尝试阅读 http ://www.asp.net/web-api/overview/formats-and-model-binding/json-and-xml-serialization

关于路由，请尝试阅读本文(我猜您正在使用Web API 2)

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

查看全文