Vue 인증 작성 방법

Vue는 사용 편의성과 유연성을 제공하는 인기 있는 프런트 엔드 프레임워크입니다. Vue 애플리케이션을 개발할 때 인증된 사용자만 제한된 리소스에 액세스할 수 있도록 사용자 인증 및 권한 부여 기능을 구현해야 하는 경우가 많습니다. 이 글에서는 Vue에서 인증을 구현하는 방법을 소개합니다.

1. 인증 방법 결정

인증 함수 작성을 시작하기 전에 사용할 인증 방법을 결정해야 합니다. 일반적인 인증 방법에는 역할 기반 액세스 제어(RBAC)와 권한 기반 액세스 제어(ABAC)가 있습니다. RBAC는 사용자를 역할에 할당하고 각 역할에 특정 권한을 부여하여 리소스에 대한 액세스를 제어하는 ​​액세스 권한 부여 정책입니다. ABAC는 특정 사용자에게 액세스 권한이 있는지 여부를 결정하기 위해 사용자와 리소스 간에 일련의 규칙을 설정하는 액세스 권한 부여 정책입니다.

Vue 애플리케이션에서는 RBAC 또는 ABAC 인증 방법을 구현하는 구체적인 단계가 다르므로 애플리케이션 요구 사항에 따라 적절한 방법을 선택해야 합니다.

2. 신원 인증 구현

인증을 구현하기 전에 사용자 신원 인증을 구현해야 합니다. 일반적으로 이는 로그인 양식으로 사용자의 자격 증명을 가져와 확인을 위해 서버로 보내는 방식으로 수행됩니다. 인증이 성공하면 사용자에 대한 ID 정보와 토큰이 포함된 응답이 생성되어 애플리케이션의 로컬 저장소나 쿠키에 저장됩니다.

다음은 사용자가 사용자 이름과 비밀번호를 입력하고 확인을 위해 서버로 보내는 샘플 코드입니다.

methods: {
  login() {
    axios.post('/auth/login', {username: this.username, password: this.password})
      .then(response => {
        const {user, token} = response.data
        localStorage.setItem('user', JSON.stringify(user))
        localStorage.setItem('token', token)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

3. Vue Route Guards 작성

Vue는 "Route Guards"라는 기능을 제공합니다. 인터셉터 기능은 탐색 시작 시, 경로 독점 가드 중, 경로 글로벌 가드 중에 이러한 인터셉터를 경로 지정하고 호출하는 기능입니다.

Vue에서는 인증된 사용자만 제한된 경로에 액세스할 수 있도록 경로 가드를 사용하여 액세스 제어를 구현할 수 있습니다. 다음은 Vue 경로 가드가 승인된 경로를 가로채는 샘플 코드입니다:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token') !== null
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ name: 'home' })
  } else {
    next()
  }
})

위 코드에서 사용자가 "requiresAuth" 메타데이터로 표시된 경로에 액세스하려고 하면 경로 독점 가드와 전역 가드 사이를 라우팅 후크라고 합니다. 기능. 사용자가 인증되면 경로에 대한 액세스가 허용됩니다. 그렇지 않으면 로그인 페이지로 리디렉션됩니다.

4. RBAC 및 ABAC 인증 구현

RBAC 및 ABAC 인증 구현 방법이 다릅니다. 간단히 말해서 RBAC는 사용자를 역할과 권한으로 나누고 이를 이미 정의된 역할에 할당합니다. ABAC는 보안 정책을 집합으로 설정하고 액세스 요청 시 이러한 정책을 시행하여 제한된 리소스에 액세스할 수 있는 사용자를 결정합니다.

RBAC 인증을 구현할 때 사용자 역할과 권한 간의 매핑을 구축하고 각 사용자에게 역할을 할당해야 합니다. 그런 다음 애플리케이션은 사용자의 역할에 따라 사용자에게 특정 리소스에 액세스할 수 있는 권한이 있는지 여부를 결정할 수 있습니다. 다음은 샘플 코드입니다.

const roles = {
  admin: {
    permissions: ['user:list', 'user:create', 'user:edit']
  },
  manager: {
    permissions: ['user:list', 'user:edit']
  },
  member: {
    permissions: []
  }
}

function checkPermission(permission) {
  const user = JSON.parse(localStorage.getItem('user'))
  const userRole = user.role
  if (roles[userRole]) {
    return roles[userRole].permissions.includes(permission)
  } else {
    return false
  }
}

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permission: 'user:list' }
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' })
  } else if (to.meta.permission && !checkPermission(to.meta.permission)) {
    next({ name: 'home' })
  } else {
    next()
  }
})

위 코드에서 역할 매핑은 역할 개체에 저장됩니다. 사용자 역할은 localStorage에 저장된 사용자 정보에 따라 결정됩니다. 권한을 확인하는 실제 함수인 checkPermission()은 사용자에게 지정된 권한이 있는지 확인합니다.

ABAC 인증을 구현할 때 리소스에 대한 보안 작업을 수행하기 위해 액세스가 어떻게 사용되는지 확인하는 정책을 작성해야 합니다. ABAC(속성 기반 액세스 제어)를 예로 들면, ABAC는 사용자와 관련된 속성(예: 역할, 위치 또는 소유한 장치)을 기반으로 사용자가 리소스에 액세스할 수 있는지 확인하는 규칙 세트를 정의합니다.

다음은 Vue 경로 가드가 속성을 사용하여 ABAC 정책을 시행하는 샘플 코드입니다.

const permissions = {
  'user:list': {
    condition: 'user.role === "admin" || user.role === "manager"'
  },
  'user:create': {
    condition: 'user.role === "admin"'
  },
  'user:edit': {
    condition: 'user.role === "admin" || (user.role === "manager" && user.department === "it")'
  }
}

const checkPermission = (permission) => {
  const user = JSON.parse(localStorage.getItem('user'))
  const rule = permissions[permission]
  return rule && eval(rule.condition)
}

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permission: 'user:list' }
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'home' })
  } else if (to.meta.permission && !checkPermission(to.meta.permission)) {
    next({ name: 'home' })
  } else {
    next()
  }
})

위 코드에서 각 액세스 권한 부여 규칙에는 사용자가 특정 리소스에 액세스하기 위해 충족해야 하는 속성을 정의하는 조건 속성이 있습니다. checkPermission() 함수는 eval() 함수를 사용하여 규칙의 조건 속성을 해석하고 실행합니다.

요약

Vue 애플리케이션에서 인증을 구현하려면 인증 방법을 결정하고, 신원 확인을 구현하고, Vue 라우팅 가드를 작성하고, RBAC 또는 ABAC 인증을 구현해야 합니다. 어떤 인증 방법을 사용하든 Vue Route Guard는 인증을 획득하는 핵심 기술입니다. Vue 경로 가드를 사용하고 RBAC 또는 ABAC 인증을 구현하면 애플리케이션에서 액세스를 쉽게 승인하고 제한된 리소스를 보호할 수 있습니다.

위 내용은 Vue 인증 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!