Uniapp路由守衛實現頁面訪問權限控制

一、Uniapp簡介

Uniapp是一個基於Vue.js框架的多端開發解決方案，它可以支持使用一套代碼編譯到不同的平台，包括微信小程序、支付寶小程序、H5、App、快應用等，可以提高開發效率。

在Uniapp中，路由作為一個非常重要的組成部分，提供了頁面之間的跳轉，而路由守衛則能夠幫助開發者實現頁面訪問權限的控制，從而保障應用安全性。

二、Uniapp路由守衛簡介

路由守衛是Vue.js提供的一種路由攔截機制，通俗的說，路由守衛就像是在門口安裝了一個關卡，所有進出的人都必須經過該關卡的安全檢查。Uniapp中，路由守衛也有相應的實現，可以在頁面跳轉前對用戶是否有相應權限進行判斷，從而實現權限控制。

三、實現步驟

1. 在uniapp項目中的`main.js`文件中引入`uni-simple-router`, 並在Vue實例上綁定路由:

  
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import SimpleVueRouter from 'uni-simple-router';

    Vue.use(SimpleVueRouter, router);

    const app = new Vue({
      router,
      ...App
    })
    app.$mount()
  

2. 在路由配置文件`router.js`中配置需要守衛的路由:

  
    import Vue from 'vue'
    import Router from 'uni-simple-router'

    Vue.use(Router)

    const routes = [
      {
        path: '/home',
        name: 'home',
        meta: {
          auth: true, // 這裡定義需要登錄的路由
        },
        component: () => import('@/pages/home.vue')
      },
      {
        path: '/login',
        name: 'login',
        component: () => import('@/pages/login.vue')
      }
    ]

    const router = new Router({
      routes
    })

    router.beforeEach((to, from, next) => {
      if (to.meta.auth && !sessionStorage.getItem("token")) { // 在路由元信息中定義 auth 屬性
        next("/login")
      } else {
        next()
      }
    })

    export default router
  

在上述代碼中，我們定義了兩個路由用於展示和登錄操作，並將`/home`路由設置為需要登錄後才能訪問。`router.beforeEach`函數用於在路由切換前進行權限判斷，如果`/home`路由需要登錄且用戶未登錄，則跳轉到`/login`路由。

四、代碼示例

完整的代碼示例如下:

  
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import SimpleVueRouter from 'uni-simple-router';

    Vue.use(SimpleVueRouter, router);

    const app = new Vue({
      router,
      ...App
    })
    app.$mount()
  

  
    import Vue from 'vue'
    import Router from 'uni-simple-router'

    Vue.use(Router)

    const routes = [
      {
        path: '/home',
        name: 'home',
        meta: {
          auth: true, // 這裡定義需要登錄的路由
        },
        component: () => import('@/pages/home.vue')
      },
      {
        path: '/login',
        name: 'login',
        component: () => import('@/pages/login.vue')
      }
    ]

    const router = new Router({
      routes
    })

    router.beforeEach((to, from, next) => {
      if (to.meta.auth && !sessionStorage.getItem("token")) { // 在路由元信息中定義 auth 屬性
        next("/login")
      } else {
        next()
      }
    })

    export default router
  

五、總結

通過路由守衛的實現，我們可以實現頁面的訪問權限控制，這對於需要保證應用安全性的場景下非常有效。同時，在Uniapp中，路由守衛的使用也非常簡單，只需要在路由配置文件中進行相關設置即可。