Implementierungsmethode zur Überprüfung der Vue-Anmelderoute

Wenn der Anmeldestatus eines Vue-Projekts mithilfe des Vuex-Status verwaltet wird, verschwindet der von Vuex verwaltete Status, sobald die Seite aktualisiert wird, wodurch die Überprüfung der Anmeldeweiterleitung bedeutungslos wird. Der Anmeldestatus kann zur Speicherverwaltung in den Webspeicher geschrieben werden. Dieser Artikel stellt hauptsächlich die Implementierung der Vue-Login-Routing-Überprüfung vor. Er hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen.

Die Schritte sind wie folgt:

1. Schreiben Sie in der Anmeldekomponente den Anmeldestatus in den Webspeicher. (Im Allgemeinen wird die Sitzung in den Sitzungsspeicher geschrieben und die gespeicherten Daten werden automatisch gelöscht)

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

2. Fügen Sie die Anmeldeüberprüfungskennung „requiresAuth“ (angepasst) zu den Routing-Metainformationen hinzu, die eine Anmeldeüberprüfung erfordern
[html] einfache Kopie anzeigen

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

3. Überprüfen Sie, ob für die Seite eine Anmeldung in der globalen Hook-Funktion erforderlich ist, bevor die globale Komponente geladen wurde. Geben Sie zu diesem Zeitpunkt direkt die Route, zu der Sie gehen möchten, in die Adressleiste des Browsers ein. Sie werden dann nicht zur Anmelderoute weitergeleitet.

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() }} 
      //如果不需要登录验证，或者已经登录成功，则直接放行
    }

Verwandte Empfehlungen:

Detaillierte Erläuterung der Routenüberprüfung und der entsprechenden Abhörnutzung in Vue

PHP Framework Simple Router

Wie behebe ich den Routing-Fehler beim Erstellen von Routing in Vue.js?

Das obige ist der detaillierte Inhalt vonImplementierungsmethode zur Überprüfung der Vue-Anmelderoute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!