聊聊前端vue控制路由權限的實作方法

在前端開發中，路由控制權限是一個非常基礎、非常重要的部分。路由控制權限可以根據使用者的身分和權限，將不同的路由頁面展示給使用者。這樣可以確保使用者只能造訪與其身分相符的頁面，提高了網站的安全性和使用者體驗。

Vue.js 是一個非常受歡迎的前端框架，它提供了許多方便開發的工具，其中包括路由控制權限。在 Vue 中，我們可以透過路由守衛來控制使用者存取權限，以下介紹具體的實作方法。

1.建立路由

首先，我們需要建立一個包含全部路由的路由表。這裡假設我們有兩個頁面，一個是首頁，另一個是需要授權才能存取的 profile 頁面。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Profile from '@/components/Profile'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

在路由表中，我們為存取 profile 頁面的路由新增了 meta: { requiresAuth: true } 屬性，表示該頁面需要授權才能存取。

2.設定路由守衛

接下來，在 Vue 中設定路由守衛。路由守衛是可以在路由變化前和路由變化後做出反應的回呼函數。我們可以在路由守衛中判斷使用者是否登入和使用者的身份，來判斷是否有存取權限。

這裡先定義一個名為auth 的路由守衛：

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const currentUser = firebase.auth().currentUser
  if (requiresAuth && !currentUser) {
    next('/login')
  } else {
    next()
  }
})

在該路由守衛中，我們先透過to.matched.some(record = > record.meta.requiresAuth) 判斷需要存取的頁面是否需要授權，如果需要授權，則繼續判斷目前使用者是否登入。如果使用者未登錄，則跳到登入頁面。否則，呼叫 next() 方法繼續執行路由跳轉。

3.實作登入功能

最後，我們需要實作登入功能。由於這裡假設我們使用 Firebase 作為後端，因此實作登入需要先安裝 firebase 和 firebase-auth 兩個套件。在登入頁面中，呼叫 Firebase 的 signInWithEmailAndPassword 方法進行登錄，成功登入後跳到首頁即可。

import firebase from 'firebase'

export default {
  name: 'Login',
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    login () {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password)
        .then(() => {
          this.$router.push('/')
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}

以上就是在前端 Vue 中實作路由控制權限的方法。透過路由守衛和登入功能，我們可以實現基本的路由權限控制，保護網站安全並提高使用者體驗。

以上是聊聊前端vue控制路由權限的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！