Vue는 웹사이트 프론트 데스크에서 권한 관리를 구현합니다.

이 글에서는 주로 Vue(프런트엔드와 백엔드 분리 관행)를 기반으로 한 웹사이트 프런트엔드의 권한 관리에 대해 소개합니다. 편집자는 꽤 좋다고 생각해서 지금부터 공유해 드리겠습니다. 참고용으로요. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

요즘 인기 있는 언어인 Javascript는 프런트엔드부터 백엔드까지 어디에서나 볼 수 있습니다. 이 기술은 이제 CMS 시스템 및 기타 데이터와 같은 프런트엔드 페이지를 개발하기 위해 우리 프로젝트에서도 널리 사용됩니다. 분석 시스템에 관심이 많아 방과후 학습을 위한 모자 카드의 확장 콘텐츠로 활용하고 있습니다.
자바스크립트 프레임워크는 많지만 기본 원리는 거의 비슷하기 때문에 사전 시도를 위해 국내 사람들이 개발한 vue.js를 선택했습니다. vue.js를 배운지 일주일이 넘었는데, vue의 주요 용도를 말하자면 크기에 따라 Declarative Rendering, Component System, Client-side Routing, Vue-resource, Axios, Vuex 정도 밖에 없습니다. vue 알아보기 작은 문제이지만 가장 중요한 것은 프런트엔드와 백엔드를 분리하는 컴포넌트 기반 웹 개발이 실제로 실천하고 싶은 것입니다.

최근 제 개인 웹사이트인 CodeSheep에서 백엔드 관리를 개발해야 할 일이 생겨 vue를 사용해 구현해봤습니다. 백엔드 관리에서 피할 수 없는 문제는 권한 관리입니다. 우리는 프론트엔드와 백엔드를 분리하는 아이디어를 실천하고 싶기 때문에 백엔드에서 관리하는 모든 웹 프론트엔드 작업은 프론트엔드에서 독립적으로 완료되어야 합니다. 여기에는 매우 중요한 프론트엔드 제어도 포함됩니다. 권한에 따라 관련 항목을 관리합니다. 우리가 달성하고자 하는 것은 서로 다른 권한이 서로 다른 경로에 대응하는 동시에 페이지의 사이드바도 서로 다른 권한에 따라 해당 메뉴를 비동기적으로 생성해야 한다는 것입니다. 인터페이스 메뉴가 다르기 때문에 로그인 및 권한 확인을 위한 일련의 프로세스가 있습니다.
특정 구현

1. "로그인" 버튼을 클릭하면 로그인 이벤트가 발생합니다

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

LoginByEmail 처리 내용을 비동기적으로 실행하는 작업은 다음과 같습니다.

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

무슨 일인지 쉽게 알 수 있습니다. 서버에서 얻은 토큰(사용자의 유일한 식별자)은 브라우저의 로컬 쿠키에 배치됩니다.

2 글로벌 후크 라우터에서 라우팅을 가로채세요.beforeEach

이 단계는

경로 차단 처리 과정

구체적인 코드는 다음과 같습니다.

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

플로우 차트의 몇 가지 중요한 단계에 대한 설명:

프런트엔드에서 토큰을 얻었습니다: getToken()

작업은 매우 간단합니다. 주로 쿠키에서 얻습니다. 토큰을 얻었는지 확인합니다.

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

vuex 비동기 작업 store.dispatch('GetInfo' ): 사용자 정보 가져오기

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

작업도 매우 간단합니다. get Restful API를 사용하면 서버에서 사용자의 역할과 이름을 가져옵니다

vuex 비동기 작업 store.dispatch('GenerateRoutes', {roles } ): 서로 다른 역할에 따라 서로 다른 프런트 엔드 경로 생성

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

from 코드에서 볼 수 있듯이 관리자 역할 admin과 다른 일반 사용자만 구분합니다(즉, Aadmin이 아닌 두 가지 권한).

앞으로 이 일련의 연습을 더 많이 시도하고 하나씩 작성하겠습니다. 저도 초보자이고 갈 길이 멀습니다. . .

관련 권장 사항:

TP5 인증 권한 관리 예시

PHP에서 권한 관리 기능을 구현하는 방법

Linux 사용자 및 권한 관리 기능

위 내용은 Vue는 웹사이트 프론트 데스크에서 권한 관리를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!