vue config.js中定义变量实现配置化 打包

在项目目录的public/config.js中定义以下内容,方便全局引用

vue config.js中定义变量实现配置化 打包_第1张图片

window._config={
  //ajax接口配置
  axiosUrl: 'http://111.22.33.44:0000',
  
  isShow: false,//是否显示侧边栏
  isAuth: false,//校验框架token  true校验 false不校验
  isToken: false,//是否校验rouyi token true校验 false不校验
}

打包成dist文件后,通过修改config.js中的这些变量,就可以实现对全局侧边栏,校验token等功能的操控

比如我在操作权限的permission.js文件中引用了isToken和isAuth来实现是否校验token的功能

import router from './router'
import store from './store'
import NProgress from 'nprogress'//进度条
import { getToken } from '@/utils/auth'//获取token的方法

let isAuth = window._config.isAuth;
let isToken = window._config.isToken;

const whiteList = []

router.beforeEach((to, from, next) => {
  if (!isToken) {
    //不校验 rouyi token
    next()
  } else {
    //校验rouyi token
    NProgress.start()
    if (getToken()) {
      to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
      /* has token*/
      if (to.path === '/login') {
        next({ path: '/' })
        NProgress.done()
      } else {
        if (store.getters.roles.length === 0) {
          // 判断当前用户是否已拉取完user_info信息
          store.dispatch('GetInfo').then(() => {
            store.dispatch('GenerateRoutes').then(accessRoutes => {
              // 根据roles权限生成可访问的路由表
              router.addRoutes(accessRoutes) // 动态添加可访问路由表
              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
            })
          }).catch(err => {
            store.dispatch('LogOut').then(() => {
              Message.error(err)
              next({ path: '/' })
            })
          })
        } else {
          next()
        }
      }
    } else {
      // 没有rouyi token
      if (whiteList.indexOf(to.path) !== -1) {
        // 在免登录白名单,直接进入 或者不校验框架token
        if (sessionStorage.getItem("FrameToken") || isAuth == false) {
          // 在免登录白名单,直接进入
          next()
        } else if (to.path === '/login' || to.path == '/auth') {
          next()
        } else {
          next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
          NProgress.done()
        }
      } else {
        next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
        NProgress.done()
      }
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

你可能感兴趣的:(vue.js,javascript,前端)