Uniapp路由守卫实现页面访问权限控制

小蓝 • 2024-11-27 05:46 • 编程

一、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中，路由守卫的使用也非常简单，只需要在路由配置文件中进行相关设置即可。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/186503.html