Le rôle et l'utilisation des gardes de routage dans Uniapp

Le rôle et l'utilisation des gardes de routage dans uniapp

1 Introduction

Dans le processus de développement d'applications uniapp, nous rencontrons souvent des scénarios dans lesquels nous devons juger des autorisations des utilisateurs ou effectuer des sauts de page. Afin de réaliser ces fonctions, uniapp fournit un mécanisme de garde de route. Grâce aux gardes de route, les utilisateurs peuvent vérifier les autorisations ou effectuer d'autres opérations avant les sauts de routage, obtenant ainsi des applications plus flexibles et plus sécurisées.

2. Le rôle des gardes de routage

Les gardes de routage sont principalement utilisés pour contrôler les autorisations d'accès aux pages et mettre en œuvre des opérations d'interception globales. En exécutant une logique de code avant le saut d'itinéraire, nous pouvons réaliser les fonctions suivantes :

1. Vérification des autorisations : il peut être jugé si l'utilisateur a le droit d'accéder à une certaine page en fonction de son rôle ou de son statut de connexion et d'autres informations. Si vous n'avez pas l'autorisation, vous pouvez accéder à la page de connexion ou à d'autres pages.
2. Enregistrement de page : il peut enregistrer les pages visitées par l'utilisateur, afin que la page puisse être avancée ou reculée en cas de besoin.
3. Interception d'itinéraire : vous pouvez effectuer certaines opérations d'interception avant le saut d'itinéraire, telles que l'obtention d'informations sur l'utilisateur, la vérification de l'état du réseau, etc.

3. Utilisation des gardes de routage

Les gardes de routage dans uniapp comprennent principalement des gardes globaux et des gardes locaux.

1. Global guard

Global guard fait référence à la configuration dans le fichier main.js dans le répertoire racine du projet, qui prend effet pour toutes les routes. Nous pouvons effectuer certaines opérations globales dans la garde globale, telles que la vérification de la connexion, la vérification des autorisations d'accès à la page, etc.

Dans le fichier main.js, nous pouvons définir des gardes globales via les méthodes beforeEach et afterEach fournies par uni-app :

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 全局前置守卫
uni.$beforeEach((to, from, next) => {
  // 在这里进行权限验证或者其他操作
  next() // 调用next()方法才能进行跳转
})

// 全局后置守卫
uni.$afterEach((to, from) => {
  // 在这里进行一些全局操作
})

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

2. Gardes locales

Les gardes locales font référence à la configuration dans des fichiers de page spécifiques, uniquement pour la page actuelle prend effet. Nous pouvons définir des gardes locaux dans la fonction hook de cycle de vie dans le fichier d'échange.

Par exemple, pour définir une garde locale dans un fichier d'échange, vous pouvez ajouter une logique dans la fonction hook de cycle de vie créée de l'instance vue de la page :

export default {
  created() {
    // 在这里添加局部守卫的逻辑
  }
}

4. Exemple de code de garde de routage

Ce qui suit est un exemple qui montre comment utiliser la protection de routage d'uniapp pour déterminer les autorisations et les sauts de page.

1. Exemple de code de garde globale :

uni.$beforeEach((to, from, next) => {
  // 判断用户是否已登录
  if (to.path !== '/login' && !uni.getStorageSync('token')) {
    // 如果用户未登录，则跳转到登录页面
    next('/login')
  } else {
    // 用户已登录，可以继续访问目标页面
    next()
  }
})

2. Exemple de code de garde locale :

export default {
  created() {
    // 判断用户是否有访问当前页面的权限
    if (!this.$store.state.user.isAdmin) {
      // 如果用户不是管理员，则跳转到首页
      uni.redirectTo({
        url: '/pages/index/index'
      })
    }
  }
}

Grâce à l'exemple ci-dessus, nous pouvons voir que route guard fournit à uniapp un moyen pratique et flexible de contrôler la page Autorisations d'accès et mettre en œuvre des opérations d’interception mondiales. Dans les projets réels, nous pouvons configurer des gardes de routage en fonction de besoins spécifiques pour mieux garantir la sécurité des applications et l'expérience utilisateur.

Résumé :

Cet article présente le rôle et l'utilisation des gardes de routage dans uniapp et donne des exemples de code spécifiques. En utilisant des gardes de route, nous pouvons mettre en œuvre la vérification des autorisations des utilisateurs, le contrôle d'accès aux pages et d'autres opérations globales, améliorant ainsi la sécurité des applications et l'expérience utilisateur. J'espère que cet article pourra vous aider à mieux utiliser le mécanisme de garde de route d'uniapp.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!