Vuex implementiert unterschiedliche Berechtigungen für angemeldete und nicht angemeldete Personen

Dieses Mal werde ich Ihnen unterschiedliche Berechtigungen für die Implementierung von Anmeldung und Nicht-Anmeldung vorstellen. Was sind die Vorsichtsmaßnahmen für vuex, um unterschiedliche Berechtigungen für Anmeldung und Nicht-Anmeldung zu implementieren? Ein praktischer Fall.

Die Grundidee besteht darin, die Vuex-Statusverwaltung zu verwenden, um den Anmeldestatus zu speichern (eigentlich bedeutet dies, einen Wert wie ein Token zu speichern) und dann den Anmeldestatus vor dem Routing-Sprung zu beurteilen. Sie können den globalen Frontschutz von Vue-Router vor jedem verwenden. oder Sie können Routing Exclusive Guard beforeEnter verwenden.

Navigationswache

Wie der Name schon sagt, werden die von Vue-Router bereitgestellten Navigationswächter hauptsächlich zum Schutz der Navigation durch Springen oder Abbrechen verwendet. Es gibt viele Möglichkeiten, in den Routennavigationsprozess eingebettet zu werden: global, Exklusiv für eine einzelne Route oder Komponentenebene. Denken Sie daran, dass Änderungen an Parametern oder Abfragen keine Enter/Leave-Navigationsschutze auslösen. Sie können dies tun, indem Sie $route beobachten Objekt, um diese Änderungen zu verarbeiten, oder verwenden Sie einen beforeRouteUpdate-Schutz innerhalb der Komponente.

Vollständiger Navigationsanalyseprozess

1. Die Navigation wird ausgelöst.

2. Rufen Sie den Urlaubswächter in der deaktivierten Komponente an.

3. Rufen Sie den globalen beforeEach-Guard auf.

4. Rufen Sie den beforeRouteUpdate-Guard (2.2+) in der wiederverwendeten Komponente auf.

5. Rufen Sie vorher aufGeben Sie die Routing-Konfiguration ein.

6. Analysieren Sie asynchrone Routing-Komponenten.

7. Rufen Sie beforeRouteEnter in der aktivierten Komponente auf.

8. Rufen Sie den globalen beforeResolve-Guard (2.5+) auf.

9. Die Navigation wird bestätigt.

10. Rufen Sie den globalen AfterEach-Hook auf.

11. DOM-Update auslösen.

12. Verwenden Sie die erstellte Instanz, um die Rückruffunktion aufzurufen, die im beforeRouteEnter-Guard an next übergeben wird.

Global 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, werden globale Frontwächter in der Reihenfolge aufgerufen, in der sie erstellt wurden. Guards werden asynchron analysiert und ausgeführt. Zu diesem Zeitpunkt wartet die Navigation, bis alle Guards aufgelöst sind.

Jede Schutzmethode erhält drei Parameter:

an: Route: Das Ziel-Routing-Objekt, das im Begriff ist,

einzugeben von: Route: Die Route, die die aktuelle Navigation verlassen wird

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

next(): Fahren Sie mit dem nächsten Hook in der Pipeline fort. Wenn alle Hooks ausgeführt werden, wird der Navigationsstatus bestätigt.

next(false): Aktuelle Navigation unterbrechen. Wenn sich die URL des Browsers ändert (vielleicht manuell durch den Benutzer oder über die Zurück-Schaltfläche des Browsers), wird die URL-Adresse auf die Adresse zurückgesetzt, die der Von-Route entspricht.

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, da der Hook sonst nicht aufgelöst wird.

Exklusive Wache der Route

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

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

Weitere Informationen finden Sie in der offiziellen Dokumentation https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Nach der Installation von vuex

Erstellen Sie store.js

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

Einführung von import { mapActions,mapState } from 'vuex'

Ändern Sie dann den Anmeldestatus, base_url ist 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 Route Guard

beforeEach Verwendungsbeispiel

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();
  }
})

beforeGeben Sie ein Anwendungsbeispiel 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}表示把当前路由信息传递过去方便登录后跳转回来
     }
   } 
    }
   ]
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue.js底部导航栏的子路由不显示怎么处理

AngularJS怎么重新加载路由页面

Das obige ist der detaillierte Inhalt vonVuex implementiert unterschiedliche Berechtigungen für angemeldete und nicht angemeldete Personen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!