Bagaimana untuk mengawal kebenaran dalam Vue?

Dengan pembangunan berterusan teknologi bahagian hadapan, semakin banyak rangka kerja bahagian hadapan digunakan dalam aplikasi web, dan salah satu yang paling cemerlang ialah Vue. Vue ialah rangka kerja yang mudah difahami dan mudah digunakan yang digunakan secara meluas dalam pembangunan aplikasi web. Dalam kebanyakan aplikasi web, kawalan kebenaran adalah bahagian penting Cara mengawal kebenaran dalam Vue telah menjadi isu yang sangat kritikal.

Artikel ini akan memperkenalkan cara melaksanakan kawalan kebenaran dalam Vue, termasuk:

1. Apakah itu kawalan kebenaran?
2. Bagaimana untuk mengawal kebenaran dalam Vue?
3. Contoh tunjuk cara

Apakah itu kawalan kebenaran?

Kawalan kebenaran adalah konsep yang sangat penting, terutamanya dalam aplikasi web. Ringkasnya, kawalan kebenaran adalah untuk membahagikan pengguna kepada kategori yang berbeza dan memberikan kebenaran pengguna yang sepadan kepada setiap kategori. Dengan cara ini, pengguna hanya boleh mengakses kandungan yang mereka benarkan. Kawalan kebenaran boleh meningkatkan keselamatan dan kestabilan aplikasi serta menjadikan data lebih selamat dan boleh dipercayai.

Bagaimana untuk mengawal kebenaran dalam Vue?

Biasanya terdapat dua cara untuk mengawal kebenaran dalam Vue: yang pertama adalah untuk mengawal pada tahap penghalaan dan yang kedua adalah untuk mengawal pada tahap komponen. Kedua-dua kaedah ini akan diperkenalkan satu persatu di bawah.

1. Kawalan tahap penghalaan

Kawalan pada tahap penghalaan Kebenaran pengguna boleh ditetapkan dalam metadata penghalaan, dan kemudian disahkan dalam fungsi pengawal laluan. Jika kebenaran pengguna semasa memenuhi keperluan laluan ini, dasar itu diteruskan, jika tidak, ia menavigasi ke halaman lain.

Berikut ialah contoh laluan:

// 定义路由
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() // 如果不需要登录权限，直接进入页面
  }
});

Dalam kod di atas, kedua-dua atribut requireAuth dan peranan ditetapkan dalam metadata laluan requireAuth bermakna laluan itu memerlukan pengguna untuk log masuk sebelum mengaksesnya mewakili peranan akses terhad. Kebenaran pengguna boleh disahkan dalam fungsi sebelumSetiap laluan pengawal Jika pengguna mempunyai kebenaran untuk mengakses laluan, masukkan halaman, jika tidak, lompat ke halaman lain. Dengan cara ini, kawalan kebenaran boleh dilakukan pada peringkat penghalaan.

2. Kawalan tahap komponen

Kawalan pada tahap komponen, anda boleh menggunakan arahan Vue untuk mengawal paparan dan penyembunyian komponen. Sebagai contoh, anda boleh menetapkan atribut kebenaran untuk setiap komponen, dan kemudian menentukan dalam arahan sama ada pengguna semasa mempunyai kebenaran untuk mengakses komponen Jika ya, paparkan komponen, jika tidak, sembunyikan komponen.

Berikut ialah contoh komponen:

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

Dalam kod di atas, gunakan arahan v-if untuk menentukan sama ada pengguna semasa mempunyai kebenaran untuk mengakses komponen dan tetapkan paparan dan paparan komponen berdasarkan kebenaran hide. Dengan cara ini, kebenaran boleh dikawal pada peringkat komponen.

Contoh Demonstrasi

Berikut ialah contoh demonstrasi yang menunjukkan cara melaksanakan kawalan kebenaran dalam Vue.

Andaikan anda mempunyai aplikasi web yang mengandungi dua halaman: halaman utama yang memerlukan pengguna log masuk untuk mengakses dan halaman log masuk. Kawalan pada tahap penghalaan, kod adalah seperti berikut:

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

Dalam kod di atas, dua laluan ditakrifkan: rumah dan log masuk, di mana laluan rumah memerlukan pengguna log masuk untuk mengakses, manakala laluan log masuk tidak memerlukan log masuk. Selepas log masuk berjaya, maklumat pengguna disimpan dalam storan setempat penyemak imbas dan pemalam vue-auth-plugin digunakan untuk mengurus status pengguna.

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

Dalam kod di atas, axios digunakan untuk menghantar permintaan log masuk Selepas berjaya, maklumat pengguna disimpan dalam storan setempat penyemak imbas dan pemalam vue-auth-plugin digunakan untuk mengurus. status pengguna. Anda boleh menggunakan kaedah Vue.auth.loggedIn() untuk menyemak sama ada pengguna telah log masuk. Jika benar dikembalikan, ini bermakna pengguna telah log masuk.

Paparkan maklumat pengguna dan butang log keluar pada halaman utama, kodnya adalah seperti berikut:

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

Dalam kod di atas, gunakan kaedah localStorage.getItem() untuk mendapatkan pengguna yang disimpan dalam maklumat storan setempat, dan kemudian paparkan maklumat pengguna dan butang log keluar. Gunakan kaedah Vue.auth.logout() untuk log keluar dan melompat ke halaman log masuk selepas berjaya.

Ringkasan

Vue ialah rangka kerja bahagian hadapan web yang sangat berkuasa Apabila berurusan dengan kawalan kebenaran, ia boleh dikawal pada tahap penghalaan dan tahap komponen, dan anda boleh memilih kaedah yang sesuai mengikut. kepada keadaan sebenar. Dalam aplikasi praktikal, masih terdapat beberapa butiran yang perlu diberi perhatian, seperti pengurusan maklumat pengguna, akses merentas domain, dsb. Tetapi selagi anda menguasai prinsip kawalan kebenaran asas, anda boleh melaksanakan kawalan kebenaran dalam Vue dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk mengawal kebenaran dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!