[JavaScript知识库] uni-app设置路由白名单

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> uni-app设置路由白名单 -> 正文阅读

[JavaScript知识库]uni-app设置路由白名单

需求：使用uni-app开发，打包成多端代码，想像vue路由一样，设置路由白名单，通过百度发现，可以使用uni-simple-router插件实现路由拦截，文档链接：https://hhyang.cn/v2/，注明：该设置方法目前暂不支持vue3,方法及操作总结如下：
在这里插入图片描述

直接通过编辑器导入，导入网址：https://ext.dcloud.net.cn/plugin?id=578
通过npm方式创建的项目，操作如下：
一、 NPM安装（项目根目录命令行执行）

npm install uni-simple-router

下载成功截图如下：
在这里插入图片描述

二、初始化（说明：以下是通过自动读取 pages.json 作为路由表的方式，需要npm下载uni-read-pages）

npm install uni-read-pages

下载成功如下图：
在这里插入图片描述
下载成功后配置vue.config.js，如果你的项目根目录下没有 vue.config.js 那请你手动新增下。

vue.config.js

const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				ROUTES: webpack.DefinePlugin.runtimeValue(() => {
					const tfPages = new TransformPages({
						includes: ['path', 'name', 'aliasPath']
					});
					return JSON.stringify(tfPages.routes)
				}, true )
			})
		]
	}
}

配置完vue.config.js后，本人习惯在src下新建一个文件夹，命名为router，并在该文件夹下载新建js页面，命名为 router.js

router.js

import {
    RouterMount,
    createRouter
} from 'uni-simple-router';

const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,
    routes: [...ROUTES]
});

const whitelist = ['/pages/index/index', '/pages/wrongApproval/list', '/pages/login/login'] //声明了一个白名单
//全局路由前置守卫
router.beforeEach((to, from, next) => {
    // console.log(to, from, next, 'to, from, next')
    if (uni.getStorageSync("accessToken")) {
        next()
    } else {
        // console.log(whitelist, 'whitelist')
        if (whitelist.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
            next()
        } else {
            next({ path: '/pages/login/login' }); // 否则全部重定向到登录页
        }

    }
});

export {
    router,
    RouterMount
}

写完了路由之后，需要在main.js中引入 router.js并使用

main.js

import Vue from 'vue'
import App from './App'
import {
  router,
  RouterMount
} from './router/router' // 引入路由


//#ifdef H5
import vconsole from 'vconsole' // 引入vconsole
if (process.env.VUE_APP_ENV != 'production') {
  Vue.prototype.$vconsole = new vconsole() // 使用vconsole
}
//#endif


Vue.config.productionTip = false
Vue.use(router) // 使用路由

App.mpType = 'app'
const app = new Vue({
  ...App
})

//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
RouterMount(app, router, '#app')
// #endif

// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif