Verwenden Sie vuex, um den Anmeldestatus zu speichern und das Surfen im Nicht-Anmeldestatus zu deaktivieren. Welche spezifischen Methoden gibt es?

Im Folgenden werde ich einen Artikel darüber teilen, wie Vuex die Speicherung des Anmeldestatus implementiert und das Surfen im nicht angemeldeten Status nicht zulässt. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Die Grundidee besteht darin, die Vuex-Statusverwaltung zum Speichern des Anmeldestatus zu verwenden (eigentlich zum Speichern eines Werts, z. B. eines Tokens) und dann den Anmeldestatus zu beurteilen, bevor die Route springt Globaler Frontschutz von vue-router beforeEach, Sie können auch den route-exklusiven Schutz beforeEnter verwenden.

Navigationsschutz

Wie der Name schon sagt, wird der von vue-router bereitgestellte Navigationsschutz hauptsächlich zum Schutz der Navigation durch Springen oder Abbrechen verwendet Es gibt mehrere Möglichkeiten, die Routennavigation zu integrieren: global, pro Route oder auf Komponentenebene. Denken Sie daran, dass Änderungen an Parametern oder Abfragen keine Ein-/Ausstiegs-Navigationsschutze auslösen diese Änderungen, oder verwenden Sie den Komponentenschutz von beforeRouteUpdate

Navigationsanalysevorgang abschließen

1 Die Navigation wird ausgelöst 🎜>

2 . Rufen Sie den Leave-Guard in der deaktivierten Komponente auf

5. Rufen Sie beforeRouteEnter in der Routing-Konfiguration auf. 7. Rufen Sie beforeRouteEnter in der aktivierten Komponente auf 9. Die Navigation wird bestätigt.

11. Rufen Sie die Callback-Funktion auf an next im beforeRouteEnter-Guard übergeben

Globaler Guard

Sie können router.beforeEach verwenden, um einen globalen Front-Guard zu registrieren

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

Wenn eine Navigation ausgelöst wird, wird der globale Frontschutz in der Reihenfolge seiner Erstellung aufgerufen und die Navigation wird in allen Wächtern aufgelöst.

Jede Schutzmethode erhält drei Parameter:

nach: Route: das einzugebende Ziel-Routing-Objekt

von: Route: aktuelle Navigation ist dabei, die Route zu verlassen

nächste: Funktion: Diese Methode muss aufgerufen werden Um diesen Hook aufzulösen, hängt der Ausführungseffekt von den Aufrufparametern der nächsten Methode ab:

next(): Führen Sie den nächsten Schritt in der Pipeline aus (bestätigt). next(false): Unterbrechen Sie die aktuelle Navigation, wenn sich die Browser-URL ändert (vielleicht manuell oder durch Drücken der Zurück-Taste), dann wird die URL-Adresse auf die entsprechende Adresse zurückgesetzt zur Von-Route. next('/') oder next({ path: '/' }): Springe zu einer anderen Adresse. Die aktuelle Navigation wird unterbrochen und eine neue Navigation gestartet.

next(error):(2.4.0+) Wenn der an next übergebene Parameter eine Fehlerinstanz ist, wird die Navigation beendet und der Fehler an den von router.onError() registrierten Rückruf übergeben.

Stellen Sie sicher, dass Sie die nächste Methode aufrufen, sonst wird der Hook nicht aufgelöst.

Routenexklusiver Schutz

Sie können den BeforeEnter-Schutz direkt in der Routenkonfiguration definieren:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

Es gibt weitere Wachen. Weitere Informationen finden Sie im offiziellen Dokument https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Nach der Installation von vuex

store.js erstellen

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
  isLogin: 0
}
const mutations = {
  changeLogin(state,status){
    state.isLogin = status;
  }
}
const actions = {
  loginAction({commit}){
    commit('changeLogin',1);
  }
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

login.vue

import { mapActions,mapState } from 'vuex' einführen und dann Einloggen Für Statusänderungen ist base_url der Pfad

export default {
    name: 'Login',
    data(){
      return{
        loginForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
        },
        showLogin: false
      }
    },
    mounted(){
      this.showLogin = true;
    },
    computed: {
      ...mapState(['isLogin'])
    },
    methods: {
      ...mapActions(['loginAction']),
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if(valid){
            if(this.loginForm.username == 'aaa' && this.loginForm.password == '111'){
              console.log('验证通过');
              this.loginAction();
              this.$router.push('manage');
            }else{
              console.log('账号密码出错');
              // this.$message.error('账号密码出错');
              this.$message({
                type: 'error',
                message: '账号密码出错'
              });
            }
            console.log('请求地址: ' + base_url);
          }else{
            console.log('验证失败');
            return false;
          }
        })
      }
    }
  }

Als nächstes verwenden Sie einfach den Route Guard

beforeEach use procedure

router.beforeEach((to,from,next)=>{
  if(to.meta.check){
    var check = async function(){
      const result = await checkUser();
      if(result.status == 0){
        next();
      }else{
        alert('用户未登录');
        next({path: '/login'});
      }
    }
    check(); //后台验证session
  }else{
    next();
  }
})

VorGeben Sie die Verwendungsinstanz ein

export default new Router({
  routes: [
    {
     path: '/login',
     component: Login
    },
    {
      path: '/manage',
      name: '',
      component: Manage,
      beforeEnter: (to,from,next)=> {  //导航守卫
      console.log(to)
      console.log(from)
      if(store.state.isLogin == 1){
       console.log('用户已经登录');
       next();
      }else{
       console.log('用户未登录');
       next({path: '/login',query:{ Rurl: to.fullPath}}); //未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来
     }
   } 
    }
   ]
})

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird. Verwandte Artikel:

Beispiel für die Node.js-Methode zur Implementierung der Registrierungs-E-Mail-Aktivierungsfunktion

Webpack Babel-Loader-Dateipräprozessor Detaillierte Erklärung

JQuery-Implementierung von Beispielen für das Scrollen von Nachrichtensendungen sowie Ein- und Ausblendeffekte

Das obige ist der detaillierte Inhalt vonVerwenden Sie vuex, um den Anmeldestatus zu speichern und das Surfen im Nicht-Anmeldestatus zu deaktivieren. Welche spezifischen Methoden gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!