Bagaimana untuk menghalang halaman daripada dipaparkan tanpa log masuk dalam vue

Dalam Vue, kami sering menghadapi situasi di mana halaman tidak boleh dipaparkan apabila pengguna tidak log masuk. Masalah ini biasa berlaku dalam aplikasi praktikal kerana pengguna mesti mempunyai kebenaran yang sepadan untuk mengakses halaman tertentu.

Untuk menyelesaikan masalah ini, kami boleh menentukan pengawal penghalaan global dalam penghalaan Vue untuk melarang pemaparan halaman apabila pengguna tidak log masuk.

Di bawah, kami akan memperkenalkan cara melaksanakan fungsi ini dengan contoh khusus.

Langkah pertama ialah menentukan pengawal laluan

Dalam Vue, kami boleh mengawal kebenaran akses laluan dengan menentukan pengawal laluan. Dalam proses ini, kita perlu menggunakan fungsi cangkuk penghalaan bernama "beforeEach", yang akan dipanggil sebelum setiap suis penghalaan.

Secara khusus, kami boleh menambah kod berikut pada definisi laluan:

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem("token");  // 判断是否有登陆态
  if (to.meta.requireAuth) {  // 判断当前路由是否需要进行权限判断
    if (isLogin) {  // 已经登陆
      next();
    } else {  // 没有登陆，跳转到登陆页面
      next({
        path: "/login",
        query: {
          redirect: to.fullPath  // 记下跳转前的 url，为了登陆后自动跳转回原页面
        }
      });
    }
  } else {
    next();
  }
});

Dalam kod di atas, kami mula-mula menentukan sama ada pengguna mempunyai status log masuk melalui "localStorage", dan kemudian tentukan laluan semasa Tentukan sama ada kebenaran diperlukan. Jika pertimbangan diperlukan tetapi pengguna tidak log masuk, lompat ke halaman log masuk dan rekod URL halaman semasa untuk melompat kembali ke halaman asal secara automatik selepas berjaya log masuk.

Perlu disebut bahawa "localStorage" ialah ciri baharu dalam HTML5, yang menyediakan cara untuk menyimpan data pada bahagian klien. Apabila kami berjaya log masuk, kami boleh menyimpan token dalam "localStorage" supaya ia boleh digunakan dalam keputusan penghalaan seterusnya.

Langkah kedua ialah menentukan laluan yang memerlukan pertimbangan kebenaran

Apabila menentukan laluan, kita boleh menggunakan medan "meta" untuk menandakan sama ada laluan semasa memerlukan pertimbangan kebenaran. Jika pertimbangan kebenaran diperlukan, tambahkan kod berikut pada definisi laluan:

const router = new VueRouter({
  routes: [
    {
      path: "/home",
      name: "home",
      component: Home,
      meta: { requireAuth: true }  // 需要进行权限判断
    },
    {
      path: "/login",
      name: "login",
      component: Login
    }
  ]
});

Dalam kod di atas, kami menambahkan medan "meta: { requireAuth: true }" pada laluan yang memerlukan penghakiman kebenaran, yang bermaksud penghakiman kebenaran diperlukan.

Langkah ketiga ialah melaksanakan fungsi log masuk

Akhir sekali, kita perlu melaksanakan fungsi log masuk Apabila pengguna berjaya log masuk, token perlu disimpan dalam "localStorage" dan diubah hala. ke url yang disimpan sebelum ini.

Secara khusus, kami boleh menambah kod berikut pada halaman log masuk:

methods: {
  login() {
    // 登陆成功后，存储 token
    localStorage.setItem("token", "userToken");

    // 重定向到之前存储的 url
    if (this.$route.query.redirect) {
      this.$router.push(this.$route.query.redirect);
    } else {
      this.$router.push("/");
    }
  }
}

Dalam kod di atas, selepas berjaya log masuk, kami menyimpan token dalam "localStorage" dan ubah hala ke yang sebelumnya url yang disimpan.

Ringkasan

Melalui langkah di atas, kami boleh melaksanakan kawalan kebenaran penghalaan dengan mudah dalam Vue. Dalam aplikasi praktikal, kami boleh mengkonfigurasi pengawal penghalaan secara fleksibel mengikut keperluan kami sendiri untuk mencapai mekanisme kawalan kebenaran yang lebih kompleks.

Secara amnya, Vue digunakan secara meluas dalam rangka kerja bahagian hadapan, dan kawalan penghalaan Vue juga merupakan aspek yang sangat penting. Kaedah di atas boleh dikatakan sangat mewakili dalam penyelesaian kawalan kebenaran penghalaan Vue adalah bernilai belajar bagi mereka yang mempelajari kawalan kebenaran penghalaan Vue.

Atas ialah kandungan terperinci Bagaimana untuk menghalang halaman daripada dipaparkan tanpa log masuk dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!