first

src/plugins/index.ts

@@ -0,0 +1,21 @@
+import type { App } from 'vue';
+import setupI18n from '@/locales';
+import setupStore from '@/store';
+import setupRequest from '@/utils/request';
+import setupPermission from './permission';
+import setupUI from './ui';
+
+export default {
+  install(app: App) {
+    // UI扩展配置
+    setupUI(app);
+    // 状态管理
+    setupStore(app);
+    // 国际化
+    setupI18n(app);
+    // 路由拦截
+    setupPermission();
+    // 网络请求
+    setupRequest();
+  },
+};

src/plugins/permission.ts

@@ -0,0 +1,57 @@
+import {
+  ERROR404_PATH,
+  isPathExists,
+  LOGIN_PATH,
+  removeQueryString,
+  routes,
+} from '@/router';
+import { isLogin } from '@/utils/auth';
+
+// 白名单路由
+const whiteList = ['/'];
+routes.forEach((item) => {
+  if (item.needLogin !== true) {
+    whiteList.push(item.path);
+  }
+});
+
+/**
+ * 权限校验
+ * @param {string} path
+ * @returns {boolean} 是否有权限
+ */
+export function hasPerm(path = '') {
+  if (!isPathExists(path) && path !== '/') {
+    uni.redirectTo({
+      url: ERROR404_PATH,
+    });
+    return false;
+  }
+  // 在白名单中或有token，直接放行
+  const hasPermission
+    = whiteList.includes(removeQueryString(path)) || isLogin();
+  if (!hasPermission) {
+    // 将用户的目标路径传递过去，这样可以实现用户登录之后，直接跳转到目标页面
+    uni.redirectTo({
+      url: `${LOGIN_PATH}?redirect=${encodeURIComponent(path)}`,
+    });
+  }
+  return hasPermission;
+}
+
+function setupPermission() {
+  // 注意：拦截uni.switchTab本身没有问题。但是在微信小程序端点击tabbar的底层逻辑并不是触发uni.switchTab。
+  // 所以误认为拦截无效，此类场景的解决方案是在tabbar页面的页面生命周期onShow中处理。
+  ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].forEach((item) => {
+    // https://uniapp.dcloud.net.cn/api/interceptor.html
+    uni.addInterceptor(item, {
+      // 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
+      invoke(args) {
+        // args为所拦截api中的参数，比如拦截的是uni.redirectTo(OBJECT)，则args对应的是OBJECT参数
+        return hasPerm(args.url);
+      },
+    });
+  });
+}
+
+export default setupPermission;

src/plugins/ui.ts

@@ -0,0 +1,28 @@
+import type { App } from 'vue';
+import uviewPlus, { setConfig } from 'uview-plus';
+
+function setupUI(app: App) {
+  // 下面的在特殊场景下才需要配置，通常不用配置即可直接使用uview-plus框架。
+  // 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
+  // 需要在app.use(uview-plus)之后执行
+  setConfig({
+    // 修改$u.config对象的属性
+    config: {
+      // 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
+      unit: 'px',
+    },
+    // 修改$u.props对象的属性
+    props: {
+      // 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
+      radio: {
+        // size: 20
+      },
+      // 其他组件属性配置
+      // ......
+    },
+  });
+
+  app.use(uviewPlus);
+}
+
+export default setupUI;