Comment implémenter la fonction de gestion des autorisations à l'aide de vue

Cet article présente principalement la gestion des autorisations du front-end du site Web basée sur Vue (la pratique de séparation du front-end et du back-end). Maintenant, je le partage avec vous et vous donne une référence.

En tant que langage populaire de nos jours, Javascript est largement utilisé et peut être vu partout, du front-end au back-end. Cette technologie est désormais également largement utilisée dans nos projets de développement de systèmes CMS et d'autres systèmes d'analyse de données. La page d'accueil, pour laquelle je suis très intéressé et je l'utilise comme contenu étendu de la carte chapeau pour l'apprentissage parascolaire.
Il existe de nombreux frameworks Javascript, mais les principes de base sont à peu près les mêmes, nous avons donc choisi vue.js développé par des nationaux pour faire une tentative préliminaire. Cela fait plus d'une semaine que j'ai appris vue.js. En parlant des principales utilisations de vue, il n'y a rien de plus que le rendu déclaratif, le système de composants, le routage côté client, Vue-resource, Axios et Vuex selon la taille. du projet.Apprentissage de la vueC'est une petite affaire, mais l'essentiel est de changer votre façon de penser. Le développement Web basé sur des composants qui sépare le front-end et le back-end est ce que vous voulez vraiment pratiquer.

Il se trouve que mon site Web personnel CodeSheep a récemment besoin de développer une gestion backend, j'ai donc simplement utilisé vue pour l'implémenter. En matière de gestion backend, le problème incontournable est la gestion des autorisations. Puisque nous voulons mettre en pratique l'idée de séparer le front-end et le back-end, toutes les choses du front-end Web gérées par le back-end doivent être complétées indépendamment par le front-end. Cela inclut le contrôle frontal très important. de choses liées en fonction des autorisations. Ce que nous voulons réaliser est le suivant : différentes autorisations correspondent à différents itinéraires. Dans le même temps, la barre latérale de la page doit également générer de manière asynchrone le menu correspondant en fonction de différentes autorisations. Pour le dire franchement, les utilisateurs ayant des autorisations différentes le voient lors de la gestion en arrière-plan. . Le menu de l'interface est différent, il existe donc un ensemble de processus de connexion et de vérification des autorisations.
Implémentation spécifique

1. Cliquez sur le bouton "Connexion" pour déclencher l'événement de connexion

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

Le contenu du traitement des actions déclenchées de manière asynchrone LoginByEmail est le suivant :

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

Il est facile de voir que ce que vous voulez faire est de mettre le jeton (indiquant de manière unique l'identité de l'utilisateur) obtenu du serveur dans le cookie local du navigateur

2. Routeur de hook global L'interception des routes

dans .beforeEach est l'étape principale. Le flux de traitement spécifique est le suivant :

Interception de route. flux de traitement

Le code spécifique est le suivant :

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')
  }
 }
})

Explication de plusieurs étapes importantes dans l'organigramme :

Juger si le front-end a obtenu le jeton : getToken()

L'opération est très simple, obtenue principalement à partir de Cookie, vérifiez si le token a été obtenu :

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

opération asynchrone vuex store.dispatch('GetInfo') : Obtenir des informations sur l'utilisateur

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

opération C'est également très simple. Utilisez une API get restful pour obtenir le rôle et le nom de l'utilisateur à partir du serveur

opération asynchrone vuex store.dispatch('GenerateRoutes', { rôles }) : générer différentes routes frontales basées sur différents rôles

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

Comme vous pouvez le voir dans le code, je fais uniquement la distinction entre le rôle d'administrateur admin et les autres utilisateurs ordinaires (c'est-à-dire non- Aadmin deux autorisations)

La pratique de cette série sera suivie. Je vais essayer davantage et écrire les articles un par un. Je suis aussi un débutant, et le chemin est long et je le cherche. . .

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter la communication dans vue2.0 ?

Quelles sont les méthodes de liaison de style dans Angular 2+ ?

Quelles sont les différences entre on et click dans jquery ?

Quelles sont les différences entre on et click dans jquery ?

JSsearch imitant Taobao (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!