Vue에서 권한을 제어하는 방법은 무엇입니까?-View.js-php.cn

Vue에서 권한을 제어하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-06-11 09:10:55

원래의

3782명이 탐색했습니다.

프론트엔드 기술이 지속적으로 발전하면서 웹 애플리케이션에서 점점 더 많은 프론트엔드 프레임워크가 사용되고 있는데, 그 중 가장 뛰어난 프레임워크 중 하나가 Vue입니다. Vue는 웹 애플리케이션 개발에 널리 사용되는 이해하기 쉽고 사용하기 쉬운 프레임워크입니다. 대부분의 웹 애플리케이션에서 권한 제어는 중요한 부분입니다. Vue에서 권한을 제어하는 방법은 매우 중요한 문제가 되었습니다.

이 기사에서는 다음을 포함하여 Vue에서 권한 제어를 수행하는 방법을 소개합니다.

권한 제어란 무엇입니까?
Vue에서 권한을 제어하는 방법은 무엇입니까?
예시 시연

권한 제어란 무엇인가요?

권한 제어는 매우 중요한 개념으로, 특히 웹 애플리케이션에서 중요합니다. 간단히 말해서 권한 제어는 사용자를 여러 범주로 나누고 해당 사용자 권한을 각 범주에 할당하는 것입니다. 이렇게 하면 사용자는 자신이 허용한 콘텐츠에만 액세스할 수 있습니다. 권한 제어는 애플리케이션의 보안과 안정성을 향상시키고 데이터를 더욱 안전하고 안정적으로 만들 수 있습니다.

Vue에서 권한을 제어하는 방법은 무엇입니까?

Vue에서 권한을 제어하는 방법은 일반적으로 두 가지가 있습니다. 첫 번째는 라우팅 수준에서 제어하는 것이고, 두 번째는 구성 요소 수준에서 제어하는 것입니다. 아래에서는 이 두 가지 방법을 하나씩 소개하겠습니다.

라우팅 수준 제어

라우팅 수준에서 제어합니다. 사용자 권한은 라우팅 메타데이터 메타에서 설정한 후 라우팅 가드 기능에서 확인할 수 있습니다. 현재 사용자의 권한이 이 경로의 요구 사항을 충족하면 정책이 진행되고, 그렇지 않으면 다른 페이지로 이동합니다.

다음은 경로의 예입니다.

// 定义路由
const routes = [
  {
    path: '/home', // 路径
    name: 'home', // 路由名称
    component: Home, // 路由对应的组件
    meta: {
      requireAuth: true, // 需要用户权限
      roles: ['admin', 'guest'] // 受访问限制的角色
    }
  },
  {
    path: '/login', // 路径
    name: 'login', // 路由名称
    component: Login // 路由对应的组件
  }
];

// 创建路由实例
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
});

// 添加路由前置守卫
router.beforeEach((to, from, next) => {
  // 判断该路由是否需要登录权限
  if (to.meta.requireAuth) {
    // 如果需要，则校验用户是否已经登录
    if (Vue.auth.loggedIn()) {
      // 判断当前用户是否有访问该路由的权限
      if (to.meta.roles.indexOf(Vue.auth.getUserRole()) !== -1) {
        next() // 用户有访问权限，直接进入页面
      } else {
        next('/denied') // 跳转到其他页面
      }
    } else {
      // 如果用户未登录，则跳转到登录页面
      next('/login')
    }
  } else {
    next() // 如果不需要登录权限，直接进入页面
  }
});

로그인 후 복사

위 코드에서 requireAuth와 역할 두 속성은 경로의 메타데이터 메타에 설정되어 있습니다. requireAuth는 경로에 액세스하려면 사용자 로그인이 필요함을 나타내고 역할은 역할을 나타냅니다. 제한된 접근으로. 사용자 권한은 beforeEach 경로 보호 기능에서 확인할 수 있습니다. 사용자에게 해당 경로에 대한 액세스 권한이 있으면 해당 페이지로 들어가고, 그렇지 않으면 다른 페이지로 이동합니다. 이러한 방식으로 라우팅 수준에서 권한 제어를 수행할 수 있습니다.

컴포넌트 수준 제어

컴포넌트 수준에서 제어하면 Vue 지침을 사용하여 구성 요소의 표시 및 숨기기를 제어할 수 있습니다. 예를 들어, 각 구성 요소에 대한 권한 속성을 설정한 다음 현재 사용자에게 구성 요소에 액세스할 수 있는 권한이 있는지 여부를 지침에서 확인할 수 있습니다. 그렇다면 구성 요소를 표시하고, 그렇지 않으면 구성 요소를 숨깁니다.

다음은 컴포넌트의 예입니다.

<template>
  <div v-if="allow">
    This is a component that requires authentication.
  </div>
  <div v-else>
    You are not authorized to view this component.
  </div>
</template>

<script>
export default {
  data() {
    return {
      allow: false
    };
  },
  mounted() {
    // 获取当前用户的权限，并根据权限设置组件的显示和隐藏
    if (Vue.auth.getCurrentUserRole() === "admin") {
      this.allow = true;
    }
  }
};
</script>

로그인 후 복사

위 코드에서 v-if 지시문을 사용하여 현재 사용자에게 해당 컴포넌트에 대한 액세스 권한이 있는지 확인하고 해당 컴포넌트의 표시 및 숨기기를 설정합니다. 권한. 이러한 방식으로 권한을 구성 요소 수준에서 제어할 수 있습니다.

예제 데모

다음은 Vue에서 권한 제어를 수행하는 방법을 보여주는 예제 데모입니다.

사용자가 로그인해야 액세스할 수 있는 홈페이지와 로그인 페이지라는 두 페이지가 포함된 웹 애플리케이션이 있다고 가정해 보겠습니다. 라우팅 수준에서 제어하는 코드는 다음과 같습니다.

const routes = [
  {
    path: "/home",
    name: "home",
    component: Home,
    meta: {
      requireAuth: true,
      roles: ["admin", "guest"]
    }
  },
  {
    path: "/login",
    name: "login",
    component: Login
  }
];

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (Vue.auth.loggedIn()) {
      if (to.meta.roles.indexOf(Vue.auth.getUserRole()) !== -1) {
        next();
      } else {
        next("/denied");
      }
    } else {
      next("/login");
    }
  } else {
    next();
  }
});

로그인 후 복사

위 코드에서는 홈과 로그인의 두 가지 경로가 정의됩니다. 여기서 홈 경로는 사용자가 액세스하려면 로그인해야 하지만 로그인 경로는 로그인이 필요하지 않습니다. . 로그인에 성공하면 사용자 정보가 브라우저의 로컬 저장소에 저장되고 vue-auth-plugin 플러그인을 사용하여 사용자 상태를 관리합니다.

Vue.use(VueAuth, {
  auth: {
    login(req) {
      const username = req.body.username;
      const password = req.body.password;
      return axios.post("/api/login", {username, password}).then(res => {
        const data = res.data;
        localStorage.setItem("user", JSON.stringify(data.user));
        this.user.authenticated = true;
        return true;
      });
    },
    logout() {
      localStorage.removeItem("user");
      this.user.authenticated = false;
      return Promise.resolve();
    }
  },
  http: axios,
  tokenType: "Bearer",
  tokenName: "Authorization",
  storageType: "localStorage",
  user: {
    roles: JSON.parse(localStorage.getItem("user")).roles
  }
});

로그인 후 복사

위 코드에서는 axios를 사용하여 로그인 요청을 보내고, 사용자 정보는 브라우저의 로컬 저장소에 저장되며, vue-auth-plugin 플러그인을 사용하여 사용자 상태를 관리합니다. . Vue.auth.loggedIn() 메소드를 사용하여 사용자의 로그인 여부를 확인할 수 있습니다. true가 반환되면 사용자가 로그인되었음을 의미합니다.

홈 페이지에 사용자 정보 및 로그아웃 버튼을 표시하는 코드는 다음과 같습니다.

<template>
  <div>
    <h1>Hello, {{ user.name }}</h1>
    <h2>Your role is {{ user.role }}</h2>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user"))
    };
  },
  methods: {
    logout() {
      Vue.auth.logout().then(() => {
        this.$router.push("/login");
      });
    }
  }
};
</script>

로그인 후 복사

위 코드에서 localStorage.getItem() 메소드를 사용하여 로컬 저장소에 저장된 사용자 정보를 가져온 후 사용자를 표시합니다. 정보 및 로그 아웃 버튼. 성공 후 로그아웃하고 로그인 페이지로 이동하려면 Vue.auth.logout() 메소드를 사용하십시오.

요약

Vue는 매우 강력한 웹 프론트엔드 프레임워크입니다. 권한 제어를 처리할 때 실제 상황에 따라 라우팅 수준과 구성 요소 수준에서 제어할 수 있습니다. 실제 적용에서는 사용자 정보 관리, 도메인 간 액세스 등과 같이 주의해야 할 몇 가지 세부 사항이 여전히 있습니다. 그러나 기본 권한 제어 원칙을 숙지하면 Vue에서 권한 제어를 쉽게 구현할 수 있습니다.

위 내용은 Vue에서 권한을 제어하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!