So implementieren Sie einen Seitensprung in Vue (Springen ohne Anmeldung)

Dieser Artikel zeigt, wie Vue den Seitensprung implementiert (Sprung ohne Anmeldung). Der Inhalt ist sehr detailliert.

Umgebung: vue 2.9.3; Router

Zweck: Um einen Sprung ohne Anmeldung zu erreichen

Beispiel: Geben Sie direkt in die URL-Adressleiste .../home ein, aber diese Seite erfordert eine Anmeldung, bevor Sie den beurteilten Wert eingeben können Wird anhand des im lokalen Cache gespeicherten Tokens nach der Anmeldung beurteilt. Wenn kein Token vorhanden ist, wird zur Anmeldeseite gesprungen. Wenn eines vorhanden ist, wird es geöffnet.

Bild:

1. Geben Sie direkt http://127.0.0.1:9000/#/home in die URL-Adressleiste ein, aber die Seite springt direkt zur Anmeldeseite und dort werden Parameter sein.

Vue-Router muss installiert sein

Konfigurieren Sie zuerst das Routing

/src/router/index.js

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',// 登录
      name: 'Login',
      component: resolve => require(['@/PACS/pages/Login'],resolve)
    },{
      path: '/home',
      name: 'Home',
      meta: {
        requireAuth: true,  // 判断是否需要登录      },
      component: resolve => require(['@/PACS/pages/Home'],resolve)
    } 
    ]

})

## Feld requireAuth hinzugefügt, um zu bestimmen, ob die Route eine Anmeldung erfordert.

Dann main.js konfigurieren

//  路由判断登录 根据路由配置文件的参数router.beforeEach((to, from, next) => {  if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    console.log('需要登录');    if (localStorage.token) {  // 判断当前的token是否存在 ； 登录存入的token      next();
    }    else {
      next({
        path: '/',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由      })
    }
  }  else {
    next();
  }
});

Hier wird das Token beim Anmelden gespeichert

##In diesem Fall gelangen Sie beim Einloggen direkt zur Anmeldeseite.

Um eine erfolgreiche Anmeldung zu erreichen und dann zu der Seite zurückzukehren, auf der Sie mit der Eingabe begonnen haben, müssen Sie den später übergebenen Wert verwenden.

Wenn eine Weiterleitung enthalten ist, springen Sie zur gerade eingegebenen Seite.

Hinweis: Es ist unangemessen, Benutzerdaten im lokalen Speicher zu speichern. Dies ist nur eine Idee. Wenn die Browserdaten nach der Anmeldung nicht gelöscht werden, bleibt das Token immer bestehen und das Urteil ist ungültig.

Verwandte Empfehlungen:

Vue-Router-Routing-Beurteilungsseite ist nicht angemeldet und springt zur Anmeldeseite

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Seitensprung in Vue (Springen ohne Anmeldung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!