4부: 관리자 보기 추가

작성자: Rick Anderson

완료된 프로젝트 다운로드

관리자 보기 추가

이제 클라이언트 쪽으로 전환하고 관리자 컨트롤러의 데이터를 사용할 수 있는 페이지를 추가합니다. 이 페이지에서는 사용자가 AJAX 요청을 컨트롤러에 전송하여 제품을 만들거나 편집하거나 삭제할 수 있습니다.

솔루션 탐색기에서 Controllers 폴더를 확장하고 HomeController.cs 파일을 엽니다. 이 파일에는 MVC 컨트롤러가 포함되어 있습니다. 다음과 같은 메서드 Admin를 추가합니다.

public ActionResult Admin()
{
    string apiUri= Url.HttpRouteUrl("DefaultApi", new { controller = "admin", });
    ViewBag.ApiUrl = new Uri(Request.Url, apiUri).AbsoluteUri.ToString();

    return View();
}

HttpRouteUrl 메서드는 웹 API에 대한 URI를 만들고 나중에 보기 모음에 저장합니다.

그런 다음 작업 메서드 내에 텍스트 커서를 Admin 놓고 마우스 오른쪽 단추를 클릭하고 보기 추가를 선택합니다. 이 작업을 수행하면 보기 추가 대화 상자가 표시됩니다.

관리자 보기 메뉴의 스크린샷 보기 추가 및 바로 가기 키 Ctrl + M Ctrl + V가 강조 표시됩니다.

보기 추가 대화 상자에서 뷰 이름을 "Admin"으로 지정합니다. 강력한 형식의 보기 만들기라는 확인란을 선택합니다. 모델 클래스에서 "Product(ProductStore.Models)"를 선택합니다. 다른 모든 옵션을 기본값으로 둡니다.

보기 추가 대화 상자의 스크린샷.

추가를 클릭하면 Views/Home 아래에 Admin.cshtml이라는 파일이 추가됩니다. 이 파일을 열고 다음 HTML을 추가합니다. 이 HTML은 페이지의 구조를 정의하지만 기능이 아직 연결되지 않았습니다.

<div class="content">
    <div class="float-left">
        <ul id="update-products">
            <li>
                <div><div class="item">Product ID</div><span></span></div>
                <div><div class="item">Name</div> <input type="text" /></div> 
                <div><div class="item">Price ($)</div> <input type="text" /></div>
                <div><div class="item">Actual Cost ($)</div> <input type="text" /></div>
                <div>
                    <input type="button" value="Update" />
                    <input type="button" value="Delete Item" />
                </div>
         </li>
        </ul>
    </div>

    <div class="float-right">
    <h2>Add New Product</h2>
    <form id="product">
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Contact</legend>
            @Html.EditorForModel()
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>
    </form>
    </div>
</div>

관리 페이지에 대한 링크 만들기

솔루션 탐색기에서 Views 폴더를 확장한 다음 공유 폴더를 확장합니다. _Layout.cshtml이라는 파일을 엽니다. ID = "menu"가 있는 ul 요소와 관리자 보기에 대한 작업 링크를 찾습니다.

<li>@Html.ActionLink("Admin", "Admin", "Home")</li>

메모

샘플 프로젝트에서는 "Your logo here"라는 문자열을 바꾸는 등 몇 가지 다른 시각적인 변경 작업을 수행했습니다. 애플리케이션의 기능에는 영향을 주지 않습니다. 프로젝트를 다운로드하고 파일을 비교할 수 있습니다.

애플리케이션을 실행하고 홈 페이지 맨 위에 표시되는 "관리자" 링크를 클릭합니다. 관리자 페이지는 다음과 같아야 합니다.

관리자 페이지의 브라우저 보기 스크린샷

지금은 페이지가 아무 것도 하지 않습니다. 다음 섹션에서는 Knockout.js 사용하여 동적 UI를 만듭니다.

권한 부여 추가

관리자 페이지는 현재 사이트를 방문하는 모든 사용자가 액세스할 수 있습니다. 관리자 권한을 제한하도록 변경해 보겠습니다.

먼저 "관리자" 역할 및 관리자 사용자를 추가합니다. 솔루션 탐색기에서 필터 폴더를 확장하고 InitializeSimpleMembershipAttribute.cs 파일을 엽니다. SimpleMembershipInitializer 생성자를 찾습니다. WebSecurity.InitializeDatabaseConnection에 대한 호출 후 다음 코드를 추가합니다.

const string adminRole = "Administrator";
const string adminName = "Administrator";

if (!Roles.RoleExists(adminRole))
{
    Roles.CreateRole(adminRole);
}
if (!WebSecurity.UserExists(adminName))
{
    WebSecurity.CreateUserAndAccount(adminName, "password");
    Roles.AddUserToRole(adminName, adminRole);
}

이는 "관리자" 역할을 추가하고 그 역할에 사용자를 추가하는 빠르고 간단한 방법입니다.

솔루션 탐색기에서 Controllers 폴더를 확장하고 HomeController.cs 파일을 엽니다. 메서드에 Authorize 특성을 추가합니다 Admin .

[Authorize(Roles="Administrator")]
public ActionResult Admin()
{
    return View();
}

AdminController.cs 파일을 열고 전체 클래스에 AdminController 특성을 추가합니다.

[Authorize(Roles="Administrator")]
public class AdminController : ApiController
{
    // ...

메모

MVC와 Web API는 모두 서로 다른 네임스페이스에서 권한 부여 특성을 정의합니다. MVC는 System.Web.Mvc.AuthorizeAttribute를 사용하고 Web API는 System.Web.Http.AuthorizeAttribute를 사용합니다.

이제 관리자만 관리자 페이지를 볼 수 있습니다. 또한 관리자 컨트롤러에 HTTP 요청을 보내는 경우 요청에 인증 쿠키가 포함되어야 합니다. 그렇지 않은 경우 서버는 HTTP 401(권한 없음) 응답을 보냅니다. GET 요청을 http://localhost:*port*/api/admin보내 Fiddler에서 이를 볼 수 있습니다.

이전다음

  • Last updated on