Vue 프로젝트에서 사용자 인증 및 권한 부여를 구현하는 방법

Vue 프로젝트에서 사용자 인증 및 승인을 구현하는 방법

최근 몇 년 동안 프런트 엔드 프레임워크 Vue가 점차 웹 개발의 주류 선택이 되었습니다. Vue 프로젝트를 개발할 때 사용자 인증과 권한 부여는 필수 기능입니다. 이 글에서는 기술 구현 관점에서 Vue 프로젝트에서 사용자 인증 및 권한 부여를 구현하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. 사용자 인증

사용자 인증은 사용자가 시스템에 액세스할 수 있는 법적 권한이 있는지 확인하기 위해 사용자의 신원을 확인하는 프로세스를 의미합니다. 일반적인 사용자 인증 방법에는 사용자 이름 및 비밀번호 확인, 제3자 로그인 등이 포함됩니다. 다음은 Vue 프로젝트에서 사용자 인증 구현을 소개하는 예로 사용자 이름 및 비밀번호 확인을 사용합니다.

1. 로그인 페이지 구성 요소 만들기

Vue 프로젝트에서는 먼저 로그인 페이지 구성 요소를 만들어야 합니다. 이 구성 요소에는 사용자 이름과 비밀번호에 대한 입력 상자와 로그인 버튼이 포함되어 있습니다. 사용자가 로그인 버튼을 클릭하면 백엔드 API를 호출하여 인증을 수행합니다.

샘플 코드는 다음과 같습니다.

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名" />
    <input v-model="password" placeholder="请输入密码" type="password" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // 调用登录API，验证用户名和密码
      // 如果验证成功，将用户信息存储到本地或会话存储中
    },
  },
};
</script>

2. 사용자 이름과 비밀번호 확인

로그인 방법에서 백엔드 API를 호출하여 사용자 이름과 비밀번호가 올바른지 확인합니다. 검증에 성공하면 사용자 정보를 로컬 저장소나 세션 저장소에 저장하여 후속 접근 및 권한 제어를 용이하게 할 수 있습니다.

샘플 코드는 다음과 같습니다.

methods: {
  login() {
    // 调用登录API，验证用户名和密码的正确性
    api.login(this.username, this.password)
      .then(response => {
        const { token, userInfo } = response.data;
        // 将token和用户信息存储到本地存储或会话存储中
        localStorage.setItem('token', token);
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        // 跳转到主页或其他需要认证的页面
        this.$router.push('/home');
      })
      .catch(error => {
        console.error('登录失败', error);
      });
  },
},

3. 인증 전략

사용자 인증 후 승인이 필요한 각 페이지에서는 일반적으로 인증이 필요합니다. 로컬 저장소나 세션 저장소에 있는 사용자 정보를 확인하면 해당 사용자에게 해당 페이지에 대한 접근 권한이 있는지 확인할 수 있습니다.

샘플 코드는 다음과 같습니다.

beforeRouteEnter(to, from, next) {
  // 检查本地存储或会话存储中是否存在用户信息
  const userInfo = localStorage.getItem('userInfo');
  if (userInfo) {
    next();
  } else {
    // 用户未登录，跳转到登录页面
    next('/login');
  }
},

2. 사용자 권한

사용자 권한이란 시스템 리소스에 대한 사용자의 접근 권한을 결정하는 것을 의미합니다. Vue 프로젝트에서는 라우팅 가드 메커니즘을 통해 사용자 권한 관리를 수행할 수 있습니다. 다음은 라우팅 가드를 예로 들어 Vue 프로젝트에서 사용자 인증 구현을 소개합니다.

1. 라우팅 테이블 정의

Vue 프로젝트에서 권한 제어가 필요한 페이지를 포함하여 라우팅 테이블을 정의합니다.

샘플 코드는 다음과 같습니다.

const routes = [
  {
    path: '/home',
    component: Home,
    // 需要进行权限控制的页面，在路由元信息中定义所需的角色
    meta: { requiresAuth: true, roles: ['admin', 'user'] },
  },
  // 其他路由...
];

2. 라우팅 가드에서 인증을 수행합니다

Vue의 네비게이션 가드 beforeEach를 사용하여 라우팅 점프 전에 인증 판단을 내립니다. 사용자 정보와 라우팅 메타정보에 정의된 역할 정보를 기반으로 해당 사용자에게 해당 페이지에 접근할 수 있는 권한이 있는지 판단합니다.

샘플 코드는 다음과 같습니다.

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth) {
    // 检查本地存储或会话存储中是否存在用户信息
    const userInfo = localStorage.getItem('userInfo');
    if (userInfo) {
      const { roles } = JSON.parse(userInfo);
      const requiredRoles = to.meta.roles;
      if (roles.some(role => requiredRoles.includes(role))) {
        // 用户具有访问页面的权限
        next();
      } else {
        // 用户权限不足，跳转到无权限页面
        next('/denied');
      }
    } else {
      // 用户未登录，跳转到登录页面
      next('/login');
    }
  } else {
    // 公开页面，无需授权
    next();
  }
});

위의 코드 예시를 통해 Vue 프로젝트에서 사용자 인증 및 권한 부여 기능을 구현할 수 있습니다. 사용자 인증은 사용자 이름, 비밀번호 및 기타 정보를 확인하여 사용자의 법적 신원을 확인합니다. 사용자 인증은 경로 보호 메커니즘을 사용하여 경로가 점프하기 전에 사용자에게 페이지에 액세스할 수 있는 권한이 있는지 확인합니다. 이러한 기능을 구현하면 안전하고 안정적인 Vue 프로젝트를 구축하는 데 도움이 될 수 있습니다.

위 내용은 Vue 프로젝트에서 사용자 인증 및 권한 부여를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!