feat: support feature flags

.eslintrc.js

@@ -10,7 +10,10 @@ module.exports = {
     es6: true
   },
   extends: ['plugin:vue/recommended', 'eslint:recommended'],
-
+  globals: {
+    __DEV__: true,
+    __PLACEHOLDER__: true
+  },
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue
   rules: {

src/layout/components/Navbar/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="l-flex--row c-navbar">
     <breadcrumb class="l-flex__auto c-navbar__item" />
-    <i class="l-flex__none c-navbar__item c-navbar__info u-pointer">
+    <i
+      v-if="__PLACEHOLDER__"
+      class="l-flex__none c-navbar__item c-navbar__info u-pointer"
+    >
       <i class="c-navbar__count">1</i>
     </i>
     <upload-dashboard class="l-flex__none c-navbar__item" />
@@ -49,7 +52,9 @@ export default {
   },
   methods: {
     async logout () {
-      this.$router.replace('/')
+      if (this.$route.name !== 'home') {
+        this.$router.replace({ name: 'home' })
+      }
       await this.$store.dispatch('user/logout')
     }
   }

src/store/modules/permission.js

@@ -1,8 +1,6 @@
 import { constantRoutes, asyncRoutes } from '@/router'
 import { Role } from '@/constant'
 
-const isDev = process.env.NODE_ENV === 'development'
-
 function hasPermission (roles, route) {
   if (route.meta?.roles) {
     return roles.some(role => route.meta.roles.includes(role))
@@ -15,7 +13,7 @@ export function filterAsyncRoutes (routes, roles, force) {
 
   routes.forEach(route => {
     const tmp = { ...route }
-    if ((!tmp.dev || isDev) && (force || hasPermission(roles, tmp))) {
+    if ((!tmp.dev || __DEV__) && (force || hasPermission(roles, tmp))) {
       if (tmp.children) {
         tmp.children = filterAsyncRoutes(tmp.children, roles, force)
       }
@@ -41,7 +39,7 @@ const actions = {
     return new Promise(resolve => {
       let accessedRoutes
       if (roles.includes(Role.ADMIN)) {
-        accessedRoutes = isDev ? asyncRoutes : filterAsyncRoutes(asyncRoutes, roles, true)
+        accessedRoutes = __DEV__ ? asyncRoutes : filterAsyncRoutes(asyncRoutes, roles, true)
       } else {
         accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
       }

src/views/dashboard/index.vue

@@ -55,7 +55,10 @@
         @click="refresh"
       />
     </div>
-    <div class="c-dashboard__block c-cards">
+    <div
+      v-if="__PLACEHOLDER__"
+      class="c-dashboard__block c-cards"
+    >
       <card
         class="c-cards__item"
         type="info"

vue.config.js

@@ -1,24 +1,31 @@
 const fs = require('fs')
 const path = require('path')
+const webpack = require('webpack')
 
 const port = process.env.port || process.env.npm_config_port || 9527
 
 const isProd = process.env.NODE_ENV !== 'development'
 
+const isRelease = false
+
+const features = {
+  __DEV__: !isProd,
+  __PLACEHOLDER__: isProd || !isRelease
+}
+
+const copyFiles = [
+  { file: 'mediainfo.min.js', from: 'mediainfo.js/dist', to: '.' },
+  { file: 'MediaInfoModule.wasm', from: 'mediainfo.js/dist', to: '.' },
+  { file: 'spark-md5.min.js', from: 'spark-md5', to: '.' }
+]
+
 function resolve (...dir) {
   return path.join(__dirname, ...dir)
 }
 
 function getCopyFiles () {
-  return [
-    { file: 'mediainfo.min.js', from: 'mediainfo.js/dist', to: '.' },
-    { file: 'MediaInfoModule.wasm', from: 'mediainfo.js/dist', to: '.' },
-    { file: 'spark-md5.min.js', from: 'spark-md5', to: '.' }
-  ].filter(({ file }) => !fs.existsSync(resolve('public', file))).map(({ file, from, to }) => {
-    return {
-      from: resolve('node_modules', from, file),
-      to
-    }
+  return copyFiles.filter(({ file }) => !fs.existsSync(resolve('public', file))).map(({ file, from, to }) => {
+    return { from: resolve('node_modules', from, file), to }
   })
 }
 
@@ -65,6 +72,9 @@ module.exports = {
     // when there are many pages, it will cause too many meaningless requests
     config.plugins.delete('prefetch')
 
+    config.plugin('feature-flags')
+      .use(webpack.DefinePlugin, [features])
+
     // set svg-sprite-loader
     config.module
       .rule('svg')