Méthode d'implémentation de la vérification de l'itinéraire de connexion vue

Si le statut de connexion d'un projet Vue est géré à l'aide du statut vuex, le statut géré par vuex disparaîtra dès que la page sera actualisée, rendant la vérification du routage de connexion inutile. L'état de connexion peut être écrit sur le stockage Web pour la gestion du stockage. Cet article présente principalement en détail la mise en œuvre de la vérification du routage de connexion Vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Les étapes sont les suivantes :

1. Dans le composant de connexion, écrivez l'état de connexion dans le stockage Web. (Généralement écrit dans le stockage de session, la session est fermée et les données stockées sont automatiquement supprimées)

if('登录成功') 
 {sessionStorage.setItem('accessToken' , 写入登录成功返回的登录令牌或者自定义的判断字符串) }

2 Ajoutez l'identifiant de vérification de connexion requireAuth (personnalisé) aux métainformations de routage qui nécessitent une vérification de connexion <🎜. >[html] afficher la copie simple

routers: [ 
      { path: '/listInfo', 
         name: 'listInfo', 
         component: listInfo, 
         meta: { requiresAuth: true  
               } 
          } 
       ]

3. Vérifiez si la page nécessite une connexion dans la fonction de hook globale avantEach. Après le chargement du composant global. A ce moment, saisissez directement l'itinéraire vers lequel vous souhaitez accéder dans la barre d'adresse du navigateur, et vous ne serez pas dirigé vers l'itinéraire de connexion.

router.beforeEach((to, from, next) => {  
    //to即将进入的目标路由对象，from当前导航正要离开的路由， next : 下一步执行的函数钩子
    if(to.path === '/login') { next() } // 如果即将进入登录路由，则直接放行
     else {   //进入的不是登录路由
         if(to.meta.requiresAuth && !sessionStorage.getItem('accessToken')) {next({ path: '/login' })} 
       //下一跳路由需要登录验证，并且还未登录，则路由定向到 登录路由
       else { next() }} 
      //如果不需要登录验证，或者已经登录成功，则直接放行
    }

Recommandations associées :

Explication détaillée de la vérification de l'itinéraire et de l'utilisation de l'interception correspondante dans vue

Routeur simple PHP Framework

Comment résoudre l'erreur de routage lors de la création du routage dans Vue.js ?

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!