React Native Academy · leksjon

Håndtere tillatelser på en god måte

Kontroller tillatelsesstatusen før du ber om tillatelse, vis brukeren en kontekstuell forklaring og reduser funksjonaliteten på en god måte når tillatelsen avslås.

Leksjon 4 av 413 trinn

Håndtere tillatelser på en god måte er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hvorfor håndtering av tillatelser er viktig

iOS og Android krever uttrykkelig samtykke fra brukeren før en app kan få tilgang til sensitive funksjoner som kamera, posisjon, mikrofon eller kontakter. Hvordan De ber om tillatelser og reagerer på avgjørelsene, påvirker i stor grad brukernes tillit og appens vurderinger. En tillatelsesforespørsel som kommer på et dårlig tidspunkt eller mangler forklaring, fører ofte til avslag. Når en tillatelse først er avslått, er den eneste muligheten for å rette opp dette enhetens Innstillinger-app.

Tillatelseslivssyklusen: de fire tilstandene

En tillatelse kan ha én av fire tilstander: undetermined (ikke forespurt ennå), granted (brukeren har tillatt den), denied (brukeren svarte nei ved forrige forespørsel) og restricted (iOS – blokkert av foreldrekontroll og kan ikke endres). Appen må håndtere hver tilstand korrekt og aldri anta at en tillatelse er innvilget uten å kontrollere det.

import { PermissionStatus } from 'expo-location';

const { status } = await Location.getForegroundPermissionsAsync();

switch (status) {
  case PermissionStatus.UNDETERMINED:
    // Safe to call requestForegroundPermissionsAsync()
    break;
  case PermissionStatus.GRANTED:
    // Proceed with the feature
    break;
  case PermissionStatus.DENIED:
    // Show instructions to open Settings
    break;
}

Kontroller før De ber om tillatelse

Kontroller alltid gjeldende tillatelsesstatus med et get*Async-kall før De kaller request*Async. Hvis tillatelsen allerede er innvilget, hopper De over dialogboksen. Hvis den allerede er avslått, må De ikke spørre på nytt – iOS ignorerer forespørselen uten å vise noe, mens Android viser en snackbar i et kort øyeblikk. Vis bare forespørselen når statusen er undetermined.

async function ensureCameraPermission(): Promise<boolean> {
  const { status } = await Camera.getCameraPermissionsAsync();

  if (status === 'granted') return true;

  if (status === 'undetermined') {
    const { status: newStatus } = await Camera.requestCameraPermissionsAsync();
    return newStatus === 'granted';
  }

  // status === 'denied' — direct user to Settings
  return false;
}

Kontekstuell forklaring før tillatelsesforespørselen

Før De utløser operativsystemets tillatelsesdialog, bør De vise brukeren en egendefinert forklaringsskjerm som på enkelt språk forklarer hvorfor appen trenger tillatelsen, og hvordan den er nyttig for brukeren. En slik «forberedelsesskjerm» øker andelen innvilgede tillatelser betydelig. Den bør vises rett før systemdialogen, ikke under introduksjonen før brukeren har fått kontekst for funksjonen.

function LocationRationale({ onConfirm }: { onConfirm: () => void }) {
  return (
    <View style={styles.rationale}>
      <Ionicons name='location-outline' size={48} color='#6200ee' />
      <Text style={styles.title}>Share your location</Text>
      <Text style={styles.body}>
        We use your location to show nearby restaurants and
        calculate accurate delivery times.
      </Text>
      <Button title='Allow Location' onPress={onConfirm} />
      <Button title='Not Now' onPress={() => {}} color='gray' />
    </View>
  );
}

Koble til appinnstillinger ved avslag

Når en bruker har avslått en tillatelse og funksjonen ikke kan virke uten den, må De veilede brukeren til enhetens Innstillinger-app, slik at tillatelsen kan innvilges manuelt. Bruk Linking.openSettings() fra React Native for å åpne appens innstillingsside direkte. Forklar i et varsel hva brukeren må aktivere før De kaller openSettings.

import { Linking, Alert } from 'react-native';

function showSettingsPrompt(feature: string) {
  Alert.alert(
    feature + ' Access Denied',
    'Please enable ' + feature + ' access in your device Settings to use this feature.',
    [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Open Settings', onPress: () => Linking.openSettings() },
    ]
  );
}

Gradvis funksjonsreduksjon

Gradvis funksjonsreduksjon betyr at appen fortsatt fungerer – med redusert funksjonalitet – når en tillatelse avslås. En matleveringsapp som ikke får tilgang til posisjonen, kan for eksempel vise et manuelt adressefelt i stedet for å oppdage adressen automatisk. Utform alle funksjoner som krever tillatelser, med en alternativ løsning, slik at ingen brukere blokkeres fullstendig fra appens viktigste funksjonalitet.

export default function LocationPicker() {
  const [permission] = Location.useForegroundPermissions();
  const granted = permission?.granted;

  if (granted) {
    return <MapWithAutoLocation />; // use GPS
  }

  return <ManualAddressInput />;   // fallback — type address manually
}

canAskAgain: én mulighet til å spørre på nytt

Resultatobjektet for tillatelsen inneholder egenskapen canAskAgain. På iOS blir canAskAgain false når brukeren trykker på «Ikke tillat» i systemdialogen, og systemet viser aldri dialogen på nytt for denne tillatelsen. På Android blir den satt til false etter at brukeren avslår to ganger. Kontroller alltid dette flagget for å avgjøre om De skal vise knappen for å spørre på nytt eller en lenke til Innstillinger.

const { status, canAskAgain } = await Camera.requestCameraPermissionsAsync();

if (status !== 'granted') {
  if (canAskAgain) {
    // Show in-app explanation and re-request button
    setShowRationale(true);
  } else {
    // Show link to Settings — OS won't show dialog again
    showSettingsPrompt('Camera');
  }
}

Håndtere flere tillatelser

Noen funksjoner krever flere tillatelser samtidig – en medievelger trenger for eksempel tilgang til både kameraet og mediebiblioteket. Be om dem i rekkefølge, og kontroller hvert resultat før De ber om den neste. Hvis en tillatelse avslås, må De håndtere dette og stoppe. Ikke fortsett til neste forespørsel, slik at brukerne ikke overveldes av flere systemdialoger rett etter hverandre.

async function requestMediaFeaturePermissions() {
  const { status: cameraStatus } = await Camera.requestCameraPermissionsAsync();
  if (cameraStatus !== 'granted') {
    showSettingsPrompt('Camera');
    return false;
  }
  const { status: mediaStatus } = await MediaLibrary.requestPermissionsAsync();
  if (mediaStatus !== 'granted') {
    showSettingsPrompt('Media Library');
    return false;
  }
  return true;
}

Lagre tillatelsestilstanden

De trenger ikke å lagre tillatelsestilstanden i AsyncStorage – spør alltid på nytt med get*Async-kall, fordi brukeren kan endre tillatelser i enhetens Innstillinger mellom appøkter. De kan imidlertid lagre et flagg som hasSeenPermissionRationale i AsyncStorage, slik at den egendefinerte forklaringsskjermen bare vises én gang og ikke ved hver oppstart av appen.

async function maybeShowRationale() {
  const seen = await AsyncStorage.getItem('seenLocationRationale');
  if (!seen) {
    setShowRationale(true);
    await AsyncStorage.setItem('seenLocationRationale', 'true');
  } else {
    // Rationale seen before — go straight to checking permission
    await checkLocationPermission();
  }
}

Teste tillatelsesflyter

Test alle fire tillatelsestilstandene: første oppstart (undetermined), innvilget, avslått og avslått med canAskAgain=false. I iOS Simulator tilbakestiller De tillatelser via Device Settings-appen. I Android Emulator bruker De App Info for å tilbakekalle tillatelser manuelt. Test også lenken til Innstillinger – kontroller at den åpner riktig innstillingsside for appen, ikke den generelle innstillingssiden for enheten.

En gjenbrukbar tillatelseshook

Samle hele tillatelseslivssyklusen – kontroll, forklaring, forespørsel og alternativet Innstillinger – i en gjenbrukbar egendefinert hook. Hooken returnerer gjeldende status og en funksjon som utløser tillatelsesforespørselen. Dette eliminerer duplisert kode for tillatelseshåndtering på tvers av flere skjermer som trenger samme funksjon.

function useCameraPermission() {
  const [status, setStatus] = React.useState<string>('undetermined');

  async function request() {
    const { status: s, canAskAgain } = await Camera.requestCameraPermissionsAsync();
    setStatus(s);
    if (s !== 'granted' && !canAskAgain) {
      showSettingsPrompt('Camera');
    }
  }

  useEffect(() => {
    Camera.getCameraPermissionsAsync().then(({ status: s }) => setStatus(s));
  }, []);

  return { status, granted: status === 'granted', request };
}

Kort sjekk

Test forståelsen Deres av React Native Mobile Development-konseptene fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen har De lært at checking permission status before requesting forhindrer overflødige systemdialoger og håndterer allerede avslåtte tillatelser korrekt, at canAskAgain avgjør om appen skal spørre på nytt eller henvise brukeren til Innstillinger, og at graceful degradation gir en alternativ løsning slik at avslåtte tillatelser ikke blokkerer brukerne fullstendig fra appen. Neste tema er skjemaer og validering med react-hook-form.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Håndtere tillatelser på en god måte» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Håndtere tillatelser på en god måte», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Håndtere tillatelser på en god måte»?

Kontroller tillatelsesstatusen før du ber om tillatelse, vis brukeren en kontekstuell forklaring og reduser funksjonaliteten på en god måte når tillatelsen avslås. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Håndtere tillatelser på en god måte»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Native Academy