From c95f8ff88ba4c2a84e840023110de1ab2651cedb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Sun, 5 Jul 2020 16:48:33 +0300 Subject: [PATCH] Complete the part 4 for the mvc UI --- docs/en/Tutorials/Part-4.md | 93 +++++++++++++++++- .../bookstore-new-book-button-small.png | Bin 0 -> 3005 bytes 2 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 docs/en/Tutorials/images/bookstore-new-book-button-small.png diff --git a/docs/en/Tutorials/Part-4.md b/docs/en/Tutorials/Part-4.md index 53aa15278f..43523440db 100644 --- a/docs/en/Tutorials/Part-4.md +++ b/docs/en/Tutorials/Part-4.md @@ -171,7 +171,7 @@ Added code to the constructor. Base `CrudAppService` automatically uses these pe ### Razor Page -While securing the HTTP API & the application service prevents unauthorized users to use the services, they can still navigate to the book management page. While they will get authorization exceptions when the page makes the first AJAX call to the server, we should also authorize the page for a better user experience and security. +While securing the HTTP API & the application service prevents unauthorized users to use the services, they can still navigate to the book management page. While they will get authorization exception when the page makes the first AJAX call to the server, we should also authorize the page for a better user experience and security. Open the `BookStoreWebModule` and add the following code block inside the `ConfigureServices` method: @@ -186,6 +186,55 @@ Configure(options => Now, unauthorized users are redirected to the **login page**. +#### Hide the New Book Button + +The book management page has a *New Book* button that should be invisible if the current user has no *Book Creation* permission. + +![bookstore-new-book-button-small](images/bookstore-new-book-button-small.png) + +Open the `Pages/Books/Index.cshtml` file and change the content as shown below: + +````html +@page +@using Acme.BookStore.Localization +@using Acme.BookStore.Permissions +@using Acme.BookStore.Web.Pages.Books +@using Microsoft.AspNetCore.Authorization +@using Microsoft.Extensions.Localization +@model IndexModel +@inject IStringLocalizer L +@inject IAuthorizationService AuthorizationService +@section scripts +{ + +} + + + + + + @L["Books"] + + + @if (await AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Create)) + { + + } + + + + + + + +```` + +* Added `@inject IAuthorizationService AuthorizationService` to access to the authorization service. +* Used `@if (await AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Create))` to check the book creation permission to conditionally render the *New Book* button. + ### JavaScript Side Books table in the book management page has an actions button for each row. The actions button includes *Edit* and *Delete* action: @@ -217,7 +266,47 @@ visible: abp.auth.isGranted('BookStore.Books.Delete') ### Menu Item -Even we secured all layers of the book management page, it is still visible on the main menu of the application. +Even we have secured all the layers of the book management page, it is still visible on the main menu of the application. We should hide the menu item if the current user has no permission. + +Open the `BookStoreMenuContributor` class, find the code block below: + +````csharp +context.Menu.AddItem( + new ApplicationMenuItem( + "BooksStore", + l["Menu:BookStore"], + icon: "fa fa-book" + ).AddItem( + new ApplicationMenuItem( + "BooksStore.Books", + l["Menu:Books"], + url: "/Books" + ) + ) +); +```` + +And replace this code block with the following: + +````csharp +var bookStoreMenu = new ApplicationMenuItem( + "BooksStore", + l["Menu:BookStore"], + icon: "fa fa-book" +); + +context.Menu.AddItem(bookStoreMenu); + +//CHECK the PERMISSION +if (await context.IsGrantedAsync(BookStorePermissions.Books.Default)) +{ + bookStoreMenu.AddItem(new ApplicationMenuItem( + "BooksStore.Books", + l["Menu:Books"], + url: "/Books" + )); +} +```` {{else if UI == "NG"}} diff --git a/docs/en/Tutorials/images/bookstore-new-book-button-small.png b/docs/en/Tutorials/images/bookstore-new-book-button-small.png new file mode 100644 index 0000000000000000000000000000000000000000..13f7da9285c92a9ee1476cd12cd66d2499d652f3 GIT binary patch literal 3005 zcmbuBXEYm(8pmSZP8M*Rl7#SD2ZKa*C>(DQX@#!2tlpdI|wxz-%lfYOKFwFt;t`x)q+F;CM;-8fp$Os5xS z;56&g1I(uo_?Qvb>8wC5#lti0g`+-@GVrV^UnjFI@0zRKEnu?k`yk7^uk~OY3eV}f zML6DmPSH%7ALUT$5BEQ zL80St+u$mC;S_iOvkXiekuAg}YXpkpEoFkSm`4glOK5@G{^q)NR=KqE`lT$}l|!TT zlcPOSH(hMC7;deq$>Du}7JU5niE_C}k)FJA(V@4e%n~&?3pY7HTEj_lzlF<;#%Xi9 ziScz_h|&tzY+0igmz3DyhE~~XoOFs+Bzv}knj|D7{Ay}`dDn@smoUNb{VTh)MTdv3 z3O`owsKUetgJVeDP=cxEx%SyTeyiibFwf)8YEeWkuocrlx({npM z|K+yVGYH@-m!!@0G$G_xm88Aw9xF9YMn|QR&>iHQh`INnsp3c6>$c%(($Y{@PR7-y z5a*>GX9__@3)JzC{_fQ->7e})yg;Xk;iyx?)Q@%l+ebgJ+i`~lCGDRvxx*KbrVq32 zaP^k(@iAMsuP0ylWAOrvg-l2a&H&?H;(#aBAj%$^a&o%I1eG8M7MO2w$*R35sILmM zG(`q+gb5|w+fBs@B#D=C#a&8zqAxCVu3h=xmr6iMN!M~$`ij0c5)>QQaV@statdBa z?+PLCQeL`g*VWf959D=!ktZKPf&#~XQ~P`8*JXG7YKCTOK``E_M#ae+@16SCRgaes zO(D+&DHwiLHQDfn4*A*DVZKS(j=jfy0b4<d^nE<}G0Xsw_qzl4?4m_qez~L2Dsf zV(C$%(X~EUXS;;wJrGHkF+#YQ`b{|viO{gYlrfDH4xi+Y8hp}x*LO#aYruw!+P>nl zWiuzNVAQo9x&LjjcV=~R0{fj|@Q?%L>0-^P`$+9rY8KBA7b0u)P8? zo1l-7JdD)UAao$cB*7!zedrjJ;`QWE$5z!_rQ+fI8y+*^+!n#190l6W)l?5}$-mI$j#9&?${QW&>aGx_X4&&Y+PM*JCRe{csv#GQZ`cHtd? zEdB7_9(sPscva>AS9(>00AEg!66X>1n?)5T`EBJuI2PAF-%))WOaL`=#lsU;?5{JD`94f&+Amo#FK6_xR+ur?=Boq+B|)< z-j9ST4SN7DQ|gJxYieM5$*3B}t_>ZrT%~5O8JmaDec2hyW;*yM9`$CNZpViM;NV~Y zq~N~D?5XiUQPlQLulz3r0=b-hyVl1_YCj3y9#q;0;|CN3>m*nU${n`J)P7aYEY=B!)PAT4-Z_V%2YY&E((1G^C7dWve7v zHe3}2vmLdq9^l+i-R(C zM(AB67MF8twZP5@>flm;ga<=AMm(aa{h-Z=cfz&Fe>2DV=%A1ZZmD7=WbL=Ov^(=$ zfWzr$ezZiqH5wzx+4n1l7W}!*Ob5g)(m+PuQ6nz>35jBpek+pE``m5LU*uM%*Gn>* zHndj*a;6zJ&po#+0Ib30 zKm@2ASRW=&=`xsqjy*FR&t*dK#T$#NLGoU(0B;{YQL1M>R+(KRtMhT$IHqUs_R@H{SA*e1s zlZAZn0Tg;W>|=DYLC#oil%qK&ZG{#Z;75lptNIcHJO!Yqevwh^{rCo6$H2AGgv)n+-L`z>r z03+^FkSWO9_8awq<%{2IBk~_tJ`o*L&l9h0Y$+fW97@p<^=oYcCx(08B<-w0UBVJG z6GazFXGyV;oH