So implementieren Sie die Berechtigungsverwaltungsfunktion mit Vue

In diesem Artikel wird hauptsächlich die Berechtigungsverwaltung des Website-Frontends basierend auf Vue vorgestellt (die Praxis der Trennung von Front-End und Back-End). Jetzt teile ich es mit Ihnen und gebe Ihnen eine Referenz.

Als beliebte Sprache ist Javascript heutzutage weit verbreitet und überall vom Front-End bis zum Backend zu sehen. Diese Technologie wird mittlerweile auch in unseren Projekten häufig zur Entwicklung von CMS-Systemen und anderen Datenanalysesystemen eingesetzt. Die Frontend-Seite interessiert mich sehr und ich nutze sie als erweiterten Inhalt der Hutkarte für außerschulisches Lernen.
Es gibt viele Javascript-Frameworks, aber die Grundprinzipien sind ungefähr gleich. Deshalb haben wir uns für vue.js entschieden, das von Einheimischen entwickelt wurde, um einen ersten Versuch zu unternehmen. Es ist mehr als eine Woche her, seit ich vue.js kennengelernt habe. Apropos Hauptverwendungszwecke von vue: Je nach Größe gibt es nichts anderes als deklaratives Rendering, Komponentensystem, clientseitiges Routing, Vue-Ressourcen, Axios und Vuex des Projekts. Es ist eine kleine Sache, aber die Hauptsache ist, Ihr Denken zu ändern. Die komponentenbasierte Webentwicklung, die das Front-End und das Backend trennt, ist das, was Sie wirklich üben möchten.

Es ist einfach so, dass meine persönliche Website CodeSheep kürzlich ein Backend-Management entwickeln muss, also habe ich einfach Vue verwendet, um es zu implementieren. Wenn es um die Backend-Verwaltung geht, ist die Berechtigungsverwaltung das unvermeidbare Problem. Da wir die Idee der Trennung von Front-End und Back-End praktizieren möchten, sollten alle vom Backend verwalteten Web-Front-End-Dinge unabhängig vom Front-End erledigt werden. Dazu gehört auch die sehr wichtige Front-End-Steuerung verwandte Dinge basierend auf Berechtigungen. Was wir erreichen wollen, ist: Unterschiedliche Berechtigungen entsprechen unterschiedlichen Routen. Gleichzeitig sollte die Seitenleiste der Seite auch das entsprechende Menü entsprechend unterschiedlichen Berechtigungen generieren. Um es ganz klar auszudrücken: Benutzer mit unterschiedlichen Berechtigungen sehen es während der Hintergrundverwaltung . Das Schnittstellenmenü ist anders, daher gibt es eine Reihe von Prozessen für die Anmeldung und Berechtigungsüberprüfung.
Spezifische Implementierung

1. Klicken Sie auf die Schaltfläche „Anmelden“, um das Anmeldeereignis auszulösen

this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
 this.$router.push({ path: '/' }); //登录成功之后重定向到首页
}).catch(err => {
 this.$message.error(err); //登录失败提示错误
});

Der Verarbeitungsinhalt der asynchron ausgelösten Aktionen LoginByEmail ist wie folgt:

LoginByEmail ({ commit }, userInfo) {
   const email = userInfo.email.trim()
   return new Promise((resolve, reject) => {
    loginByEmail(email, userInfo.password).then(response => {
     const data = response.data
     setToken(response.data.token)
     commit('SET_TOKEN', data.token)
     resolve()
    }).catch(error => {
     reject(error)
    })
   })
  }

Es ist leicht zu erkennen, dass Sie das vom Server erhaltene Token (das die Identität des Benutzers eindeutig identifiziert) in das lokale Cookie des Browsers einfügen möchten

2. Intercept im globalen Hook router.beforeEach Routing

Dieser Schritt ist der Kern. Der spezifische Verarbeitungsablauf ist wie folgt:

Route-Interception-Verarbeitung Fluss

Der spezifische Code lautet wie folgt:

router.beforeEach((to, from, next) => {
 if (getToken()) { // 判断是否取到token
  if (to.path === '/login') {
   next({ path: '/' })
  } else {
   if (store.getters.roles.length === 0) { // 判断当前用户是否已获取完user_info信息
    store.dispatch('GetInfo').then(res => { // 获取user_info
     const roles = res.data.role
     store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
      router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
      next({ ...to }) // 放行路由
     })
    }).catch(() => {
     store.dispatch('FedLogOut').then(() => {
      next({ path: '/login' })
     })
    })
   } else {
    next() // 放行该路由
   }
  }
 } else {
  if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单里的路径，继续让其访问
   next()
  } else { // 其他不在白名单里的路径全部让其重定向到登录页面！
   next('/login')
   alert('not in white list, now go to the login page')
  }
 }
})

Erklären Sie einige wichtige Schritte im Flussdiagramm:

Beurteilen Sie, ob das Front-End das Token erhalten hat: getToken()

Der Vorgang ist sehr einfach, hauptsächlich über das Cookie. Erhalten Sie und prüfen Sie, ob das Token erhalten wurde:

export function getToken () {
 return Cookies.get(TokenKey)
}

vuex asynchroner Vorgang store.dispatch('GetInfo'): Benutzerinformationen abrufen

  GetInfo ({ commit, state }) {
   return new Promise((resolve, reject) => {
    getInfo(state.token).then(response => {
     const data = response.data
     console.log(data)
     commit('SET_ROLES', data.role)
     commit('SET_NAME', data.name)
     resolve(response)
    }).catch(error => {
     reject(error)
    })
   })
  }

Der Vorgang ist auch sehr einfach, indem eine get restful API verwendet wird. Rufen Sie die Rolle und den Namen des Benutzers vom Server ab

vuex asynchroner Vorgang store.dispatch('GenerateRoutes', { Roles }): Generate Different Front-End-Routen nach verschiedenen Rollen

  GenerateRoutes ({ commit }, data) {
   return new Promise(resolve => {
    const { roles } = data
    let accessedRouters
    if (roles.indexOf('admin') >= 0) {
     accessedRouters = asyncRouter
    } else {
     accessedRouters = filterAsyncRouter(asyncRouter, roles)
    }
    commit('SET_ROUTERS', accessedRouters)
    resolve()
   })
  }

Aus dem Code ist ersichtlich, dass ich nur zwischen der Administratorrolle „Administrator“ und anderen normalen Benutzern (also Nicht-Aadmin-Benutzern mit zwei Berechtigungen) unterscheide

Ich werde in dieser Reihe von Übungen mehr ausprobieren und sie einzeln aufschreiben, ich bin auch ein Anfänger und der Weg ist lang und mühsam. . .

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

Verwandte Artikel:

Wie implementiert man Kommunikation in vue2.0?

Welche Arten der Stilbindung gibt es in Angular 2+?

Was sind die Unterschiede zwischen on und click in jquery?

Was sind die Unterschiede zwischen on und click in jquery?

JSsearch imitiert Taobao (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Berechtigungsverwaltungsfunktion mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!