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 비동기 작업 저장소 .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()
   })
  }

보시다시피 코드에서는 관리자 역할인 admin과 다른 일반 사용자(예: Aadmin이 아닌 두 가지 권한)만 구별합니다.

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

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

vue2.0에서 통신을 구현하는 방법은 무엇입니까?

Angular 2+에서 스타일 바인딩 방법은 무엇인가요?

jquery에서 on과 click의 차이점은 무엇인가요?

jquery에서 on과 click의 차이점은 무엇인가요?

Taobao의 JSsearch 모방하기(자세한 튜토리얼)

위 내용은 Vue를 사용하여 권한 관리 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!