Sýnilegleiki íhluta í React með skilyrtum birtingum og vörðum

Bartlomiej Kuczynski

Lærðu hvernig á að einfalda og bæta sýnileika íhluta í React með skilyrðislegri birtingu og vörnareiningum.

Hér er tómt.

Í dag langar mig til að ræða hvernig á að stjórna Sýnilegleiki íhluta í React. En áður en við byrjum er lítill
Ábyrgðarskuldbinding:

Kynnt lausn er ekki mjög örugg hvað varðar að vernda forritið þitt gegn „hakkurum” (hver sem þeir kunna að vera).
Mundu að þú þarft að vernda viðmiðin þín og beita góðri vinnubrögðum í hönnun forritsins. Þessi lausn gerir vinnuna þína aðeins auðveldari.

Verkefni, lausn vandamáls eða það sem við viljum ná fram

Ein algengasta virkni er að birta íhlut eingöngu fyrir hóp notenda sem hafa ákveðin réttindi.,
hlutverk eða réttindi. Algeng lausn er að bæta við nokkrum efer til kóði, athuga skilyrði handvirkt og sýna eða fela þætti.

Skoðum nánar Einföld forritaforhönnun þáttur sem inniheldur fáa leiðsagnarþætti.

<!-- wp:paragraph -->
<p><code>typescript jsx
export const SimpleAppHeader: FC = () =&gt; {
    return (
 <header>
 <nav>
 
 {
 currentUser.role === "ADMIN" &amp;&amp;
 Einstaklingsþáttur fyrir stjórnendur eingöngu
                    }
 {
 currentUser.role === "USER" &amp;&amp;
 Eining eingöngu fyrir notanda
 }
 {
 (currentUser.role === "ADMIN" || currentUser.role === "USER") &amp;&amp;
                        Eining eingöngu fyrir stjórnendur og notendur
 
 Almenn notkunareining
 
 </nav>
 </header>
 )
}
</code></p>
<!-- /wp:paragraph -->

Lítur ekki illa út. Sennilega gætirðu falið athuganir í fall til að draga úr flækjustigi. núverandi notandi er eitthvað fyrirbæri
sem hefur hlutverk eign, en það gæti verið hvað sem er sem við vildum nota sem viðfangsefni stýritækisins okkar.

Þessi kóði hefur nokkur vandamál. Ef verkefni Þegar það vex notum við líklega þær byggingar í mörgum stöðum. Svo þurfum við að afrita,
Á einhvern hátt, skilyrði. Þetta kóða er erfitt að viðhalda og breyta í framtíðinni. Sérstaklega þegar aðgangsreglur breytast á meðan
tími t.d. við þurfum að breyta núverandi notandi í eitthvað annað. Það er mjög erfitt að prófa. Þú þarft að skrifa mörg próf.
bara til að ganga úr skugga um að ástandið hjá þér sé í lagi.

Forskurðun

Tími til að einfalda þennan kóða aðeins. Við gætum dregið út nokkrar aðferðir og gert kóðann styttri og minna flókinn:

const isAdmin = (role: string): boolean => role === "ADMIN";
const isUser = (role: string): boolean => role === "USER";
const isAdminOrUser = (role: string): boolean => isAdmin(role) || isUser(role);

export const SimplifiedAppHeader: FC = () => {
return (

{

isAdmin(currentUser.role) &&
Einstaklingshluti fyrir stjórnendur

}
{
isUser(currentUser.role) &&

Einstaklingshluti fyrir notendur

}
{
(isAdminOrUser(currentUser.role)) &&

Einstaklingshluti fyrir stjórnendur og notendur

}

Almenn notkunareining)


}
```

Lítur lofandi út. Við drögum úr hávaða af endurteknum línum. Kóðinn er læsilegri og auðveldari í viðhaldi. En skoðaðu
fall er stjórnandi eða notandi. Við höfum aðeins tvö hlutverk. Ef við bætum við þriðja hlutverki þurfum við að búa til annan sett af aðgerðum
sem sameinar hlutverk. Tími er kominn á aðra útgáfu.

Sía

Látið okkur kynna fallið á hlutverk sem verður staðgengill fyrir okkar er X aðgerðir.

const hasRole = (role: string, requiredRole: string[]): boolean => {
let found: string | undefined = requiredRole.find(s => role === s);
return found !== undefined;
}

export const FilteringAppHeader: FC = () => {
return (

{

hasRole(currentUser.role, ["ADMIN"]) &&
Einstaklingsþáttur fyrir stjórnendur

}
{
hasRole(currentUser.role, ["USER"]) &&

Eining eingöngu fyrir notendur

}
{
hasRole(currentUser.role, ["ADMIN", "USER"]) &&

Eining eingöngu fyrir stjórnendur og notendur

}

Almenn notkunareining)


}
```

Nú lítur vel út. Við höfum enn skilyrði í HTML-hluta kóðans, en nú getum við prófað. á hlutverk starfsemi og treysta því
mun vera notað með réttum stillingum. Að bæta við eða breyta hlutverkum er nú auðveldara. Við notum fylki sem inniheldur allt
hlutverk sem við þurfum að hafa á hreinu.

Hins vegar er þessi lausn bundin við núverandi notandi hlutur. Gerð er ráð fyrir að hluturinn sé einhvern veginn alþjóðlegur eða auðvelt að nálgast hann í
hvar sem er í forritinu. Svo getum við reynt að fanga þetta. Auðvitað getum við fært það til á hlutverk fall:

 const hasRole = (requiredRole: string[]): boolean => {
 let found: string | undefined = requiredRole.find(s => currentUser.role === s);
 return found !== undefined;
 }Hljóðskrift





En það gefur okkur næstum ekkert.



Þeir Vörður Þáttur



Tími er kominn til að búa til íhlut sem umlykur alla rökfræði. Ég nefndi hann Vörður og svona vil ég nota það.



 export const GuardedAppHeader: FC = () => {
 return (
 
 
 
 
 Eining eingöngu fyrir stjórnanda
 
 
                         Eining eingöngu fyrir stjórnanda og notanda
 
 Almenn notkunareining
 
 
 
 );
 }HljóðskriftHljóðskrift




Íhluturinn þarf tvær eiginleika. Fyrstur börn ábyrgur fyrir varðveittu efni. Í öðru lagi Krafðarhlutverk að
stjórna fylki hlutverka sem veitir okkur aðgang.



Við þurfum framsetningu á þessum struct. Hann er mjög einfaldur. Við bætum við tegundina. React.PropsWithChildren sem hefur börn
Eiginleiki. Auðvitað geturðu bætt þessum eiginleika handvirkt við gerðina þína og sleppt viðbótinni.



interface IGuardProps extends React.PropsWithChildren {
requiredRoles: string[];
}



Íhluturinn sjálfur er líka einfaldur. Við munum endurnýta hann. á hlutverk Hlutverk hér.



export const Guard = (props: IGuardProps) => {
const hasRole = (requiredRole: string[]): boolean => {
let found: string | undefined = requiredRole.find(s => currentUser.role === s);
return found !== undefined;
}

if (hasRole(props.requiredRoles)) {
    return (
 
 {props.children}
 ;
}
}
“`



Og ég gæti sagt stopp hér, en það yrði of auðvelt. Nú höfum við íhlut og getum notað hann til hins ýtrasta 😀



Vörðþjónusta



Fyrsta skrefið verður að útvista athugunum. núverandi notandi er fastkóðað gildi. Mig langar að fela þetta gildi.
í einhverja þjónustu sem mun „vita” hvernig á að staðfesta hlutverk. Tæknilega séð þýðir það að við flytjum á hlutverk fall í annað
flokkur.



Ég bý til einfaldan viðmótsflöt. Ég verndar þjónustu sem hefur aðeins eina eiginleika – á hlutverk.



útflutningsviðmót IGuardService {
checkRole: (hlutverk: strengjar[]) => bool;
}



Nú gæti einföld útfærsla litið svona út



class SimpleGuard implements IGuardService {
checkRole(roles: string[]): boolean {
let found: string | undefined = roles.find(e => e === currentUser.role);
return found !== undefined;
}
}



Til að nota það þurfum við að breyta. Ég verndar eignir og notkunartilfelli.



export interface IGuardProps extends React.PropsWithChildren {
requiredRoles: string[];
guardService: IGuardService;
}

// …

const AppHeader: FC = () => {
const guardService = new SimpleGuard();
return (

Einstaklingshluti fyrir stjórnendur
 

Einstaklingshluti fyrir notendur

Einstaklingshluti fyrir stjórnendur og notendur
 
 

Almenn notkunareining

 

);
}
```



Nú lítur íhluturinn svona út:



export const Guard = (props: IGuardProps) => {
 if (props.guardService.checkRole(props.requiredRoles)) {
 return (
 
 {props.children}
 ;
 }
 }
 Hljóðskrift



Mikið betra. Vörslustarfsemi Aðskilja okkur frá rökum sem athuga hlutverk. Við getum breytt því án afleiðinga fyrir okkur
Íhlutur. Algengt notkunartilvik er að nota gervigögn í prófum og eina „alvöru” útfærslu í framleiðslukóða.



Bannsett frumefni



Næsta umbót verður að takast á við sérsniðin. Bannaður þátt. Núverandi lausn sýnir tóman þátt. Fyrst þurfum við að
breyting Ég verði var með eignum bæta við falli sem mun birta þann þátt.



export interface IGuardProps extends React.PropsWithChildren {
 requiredRoles: string[];
 guardService: IGuardService;
 forbidden?: () => React.ReactNode;
 }Hljóðskrift



Þetta er valfrjáls eiginleiki, nafnið endar á spurningarmerki. Svo það gæti verið fall eða Óskilgreint. Við þurfum að
meðhöndla það í Vörður hluti.



export const Guard = (props: IGuardProps) => {
if (props.guardService.checkRole(props.requiredRoles)) {
return (

{props.children}

{props.forbidden()}
 {
const guardService = new SimpleGuard();
return (

Eining eingöngu fyrir stjórnanda
 

Eining eingöngu fyrir notanda

Bannað – aðeins stjórnandi getur séð þetta
}>
 

Eining fyrir stjórnanda

 

Eining fyrir stjórnanda og notanda



Almenn notkunareining

 

);
}
```







Sveigjanleiki gerða



Tími er kominn fyrir síðustu stóru breytingu. Núverandi útgáfa af íhlutnum styður aðeins hlutverk sem keðja. Við gætum haft marga mismunandi
Gerðir eigna sem við viljum athuga. Tölur eða sérsniðnar gerðir eru ekkert sérstakt. Ég mun bæta við stuðningi við generics.



Fyrsta skrefið er breytingar í Ég verndar þjónustu viðmót. Framkvæmdir munu ráðast af tegund prófaðs gildis. Það gæti
getur verið hvað sem er, svo interface ætti að sjá um það.



export interface IGuardService {
 checkRole: (roles: ROLE[]) => boolean;
 }Hljóðskrift



Nú þarf fylki af hlutverk almenn tegund. Einföld útfærsla okkar mun breytast örlítið.



class SimpleGuard implements IGuardService {
 checkRole(roles: string[]): boolean {
 let found: string | undefined = roles.find(e => e === currentUser.role);
 return found !== undefined;
 }
 }Hljóðskrift



Við þurfum að bæta við gerðartilkynningu, en við gætum útbúið innleiðingu sem styður Íhlutverk viðmót.



interface IRole {
name: string;
}

//…
class RoleGuardService implements IGuardService {
checkRole(roles: IRole[]): boolean {
let found: IRole | undefined = roles.find(e => e === userWithRole.role);
return found !== undefined;
}
}
```



Annað skref er að miðla þessari breytingu til Ég verði var með eignum.



`interface IGuardProps extends React.PropsWithChildren {
 requiredRoles: ROLE[];
 guardService: IGuardService;
 forbidden?: () => React.ReactNode;
 }`Hljóðskrift



Og í samræmi við Vörður hluti.



export const Guard = (props: IGuardProps) => {
 if (props.guardService.checkRole(props.requiredRoles)) {
 return (
 
 {props.children}
 
 {props.forbidden()}
 
 );
 }
 }




Og notkunartilvik okkar



export const AppHeader: FC = () =&gt; {
 const guardService = new SimpleGuard();
 const roleService = new RoleGuardService();
 return (
         <header>
             <nav>
                 <ul>
                     &lt;Vörður&lt;IRole&gt; requiredRoles={[{name: "ADMIN"}]} guardService={roleService}&gt;
                         <li>Einnungis stjórnandahluti</li>
                     </Guard>
                     &lt;Vörður&lt;string&gt; requiredRoles={["USER"]} guardService={guardService}&gt;
                         <li>Aðeins notendahluti</li>
                     </Guard>
                     &lt;Vörður&lt;string&gt; requiredRoles={["STJÓRNANDI"]} guardService={guardService}
 forbidden={() =&gt; <div>Bannað – aðeins stjórnandi getur séð þetta</div>}>
                         <li>Stjórnandahluti</li>
                     </Guard>
                     &lt;Vörður&lt;string&gt; requiredRoles={["USER", "ADMIN"]} guardService={guardService}&gt;
                         <li>Stjórnanda- og notendahluti</li>
                     </Guard>
                     <li>Almenn notkunareining</li>
                 </ul>
             </nav>
         </header>
     );
 }



Í þessu dæmi nota ég bæði innleiðingar af Ég verndarþjónusta bara til skýringar. Í raunverulegum notkunartilvikum þú
Notaðu líklega bara einn.



Sérhæfðir íhlutir og hreiðrun



Þeir Vörður Getur verið hnýtt. Mundu bara að aðgangur verður leystur í röð frá ytra dæminu sem er mest ytra.



export const NestAppHeader: FC = () =&gt; {
 const guardService = new SimpleGuard();
 return (
         <header>
             <nav>
                 <ul>
                     &lt;Vörður&lt;string&gt; requiredRoles={["USER", "ADMIN"]} guardService={guardService}&gt;
                         &lt;Vörður&lt;string&gt; requiredRoles={["ADMIN"]} guardService={guardService}&gt;
                             <li>Einnungis stjórnandahluti</li>
                         </Guard>
                         &lt;Vörður&lt;string&gt; requiredRoles={["USER"]} guardService={guardService}&gt;
                             <li>Aðeins notendahluti</li>
                         </Guard>
                         <li>Stjórnanda- og notendahluti</li>
                         &lt;Vörður&lt;string&gt; requiredRoles={["STJÓRNANDI"]} guardService={guardService}
 forbidden={() =&gt; <div>Bannað – aðeins stjórnandi getur séð þetta</div>}>
                             <li>Stjórnandahluti</li>
                         </Guard>
                     </Guard>
                     <li>Almenn notkunareining</li>
                 </ul>
             </nav>
         </header>
     );
 }



Í ofangreindu dæmi Stjórnandahluti gæti aldrei birst, vegna þess að notandi getur aðeins sinnt einni hlutverki. Fyrst Vörður takmörk
hlutverk til STJÓRNUN og notandi, svo STJÓRNANDI mun aldrei standast fyrstu skoðunina.



Við getum búið til sérhæfða íhluti sem fela sumar eiginleika.



export const AdminGuard = (props: Omit) => {
return 
{props.children}

}

//…
export const SpecializedAppHeader: FC = () => {
const guardService = new SimpleGuard();
return (

Einstaklingshluti fyrir stjórnendur eingöngu
 


Einstaklingshluti fyrir notendur eingöngu


Bannað – aðeins stjórnandi getur séð þetta
}>

Stjórnandahluti



Stjórnanda- og notendahluti

 

Almenn notkunareining

);
}
```



Í þessu tilviki StjórnandaVörn forskilgreina STJÓRNUN hlutverki. Afleiðingarnar eru þær að við þurfum að skilgreina tegund af hlutverk tegund
breytur.



Ályktun



Í þessari grein sýni ég þér hvernig á að búa til og nota Vörður þáttur í React. Við byrjum á flóknum kóða sem er erfitt að
Lesa og viðhalda. Við þróum það í meira. þróunaraðili Vænu ríki og kynna sérsniðið virkniefni. Næst við
Stækka íhlutinn með því að bæta við auknum virkni, endurskipuleggja með því að aðskilja þjónustuna og að lokum bæta við generískum gerðum.



Að lokum höfum við íhlut sem hægt er að setja inn í annan og er auðvelt að prófa og viðhalda.



  
  
    
      
        
          
            Tengdar greinar          

          
            
              
              
            
          
        
        
                                    
                  
          
                
          
            
              Hugbúnaðarþróun            
            Kostir og gallar React
            
              Af hverju er það þess virði að nota React? Hvaða kosti hefur JavaScript-bókasafnið? Til að finna svörin skaltu kafa í þessa grein og uppgötva raunverulega kosti þess að nota React.            
          
                                    
                                
                  Cezary Goralski
                  Software Engineer