element-ui#Message JavaScript Examples

options = {
  axiosOptions: { baseURL: 'http://localhost:3700/' },
  requestInterceptorSuccessCb: config => {
    let token = Storage.get("token");
    if (token) config.headers.Authorization = token;
    return config;
  },
  responseInterceptorSuccessCb: res => {
    if (
      res.data.code == global.code.err
    ) {
      Message({
        showClose: true,
        message: res?.data?.message || "操作失败",
        type: "error"
      });
    }
    return res;
  },
  responseInterceptorErrorCb: err => err,
}

// 响应拦截  401 token过期处理
service.interceptors.response.use(
    response => {

        return response
    },
    error => {
        // 错误提醒
        // Message.error(error.response.data)

        const { status } = error.response
        if (status === 400) {
            Message.error('token值无效，请重新登录')
            // 清除token
            localStorage.removeItem('eleToken')

            // 页面跳转
            router.push('/Login')
        }

        return Promise.reject(error)
    }
)

/**
 * message方法 默认可关闭
 * @param {*} options 消息 | 配置项
 */
function wlMessage(options) {
  Object.prototype.toString.call(options) === "[object Object]"
    ? Message({
        showClose: true,
        ...options
      })
    : Message({
        showClose: true,
        message: options
      });
}

// 记录和显示错误
function log (error) {
  store.dispatch('d2admin/log/push', {
    message: '数据请求异常',
    type: 'danger',
    meta: {
      error
    }
  })
  if (env.NODE_ENV === 'development') {
    utils.log.danger('>>>>>> Error >>>>>>')
    console.error(error)
  }
  Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
  })
}

actions = {

	/**
	 * 显示提示 msg.type 类型  msg.data 消息内容
	 * @param commit
	 * @param msg
	 */
	showMassage(store, msg) {
		console.log(msg)
		Message({
			type: msg.type,
			message: msg.message || msg.data
		})
	},
}

function loadError (item) {
    loading.close();
    let text = null;
    if (!item.url) {
        text = '请输入正确的url地址';
    } else if (item.url === item.name) {
        text = item.url;
    } else {
        text = `${item.name}:${item.url}`;
    }
    Message.error({
        message: `资源加载失败:${text}`,
        duration: 0,
        showClose: true,
    });
}

export function toast (text, time = 1500, type = TYPE.INFO) {
    Message[type]({
        message: text,
        duration: time === false ? 0 : time,
        showClose: true,
        customClass: 'jx-message'
    });
}

document.addEventListener('DOMContentLoaded', () => {
    __webpack_public_path__ = FF_EXPLORER_DATA.path.root + 'administrator/components/com_ffexplorer/assets/explorer/dist/';

    locale.use(lang)

    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Input);
    Vue.use(Button);
    Vue.use(Dialog);
    Vue.use(Upload);
    Vue.use(Pagination);
    Vue.use(Loading.directive);

    Vue.prototype.$loading = Loading.service;
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$prompt = MessageBox.prompt;
    Vue.prototype.$message = Message;

    Vue.prototype.$t = function(text) {
        return translate(text);
    }

    Vue.prototype.$ajax = function(options, method) {
        const $ = jQuery;
        const {path, params} = FF_EXPLORER_DATA;
        const url = path.ajax;
    
        return new Promise((resolve, reject) => {
            $.ajax({
                method: method ? method : 'post',
                url: url,
                dataType: 'json',
                data: $.extend({}, params, options),
            })
            .done(response => {
                resolve(response);
            })
            .fail(error => {
                reject(error);
            });
        });
    }

    new Vue({
        store,
        render: h => h(App)
    }).$mount('#explorer-app');
});

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */
  response => response.data,
  error => {
    if (process.env.NODE_ENV === 'development') {
      console.log('err' + error) // for debug
    }
    let $message

    if (error.response) {
      const data = error.response.data
      $message = data.message || (data.data && data.data.message) || error.message
    } else {
      $message = error.message
    }

    Message({
      message: $message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

// 记录和显示错误
function errorLog(error) {
  // 打印到控制台
  util.log.danger('>>>>>> Error >>>>>>')
  console.log(error)

  // 显示提示
  Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
  })
}

/**
 * message方法 默认可关闭
 * @param {*} options 消息 | 配置项
 */
export function wlMessage(options) {
  DataType.isObject(options)
    ? Message({
      showClose: true,
      ...options
    })
    : Message({
      showClose: true,
      message: options
    })
}

/**
 * message方法 默认可关闭
 * @param {*} options 消息 | 配置项
 */
export function wlMessage(options) {
  DataType.isObject(options)
    ? Message({
      showClose: true,
      ...options
    })
    : Message({
      showClose: true,
      message: options
    })
}

//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>
{
    //未成功处理
    if (res.data.code !== 1) {
        if (res.data.code === 0) {
            Message({
                showClose: true,
                message: res.data.msg,
                type: "error"
            });
            return Promise.reject(res.data);
        } else {
            delCookie('isLogin');
            deleteSessionStorage('rolelist');
            deleteSessionStorage('authlist');
            /*删除stores数据*/
            store.commit('user/setState',{key:'roles',val:null});
            /*刷新页面*/
            location.reload();
        }
    }
    return res.data;
}, (error) =>
{
    Message({
        showClose: true,
        message: '接口请求异常，请稍后再试~',
        type: "error"
    });
    return Promise.reject(error);
});

/**
 * @author 封装 element-ui 消息提示
 * @param text
 * @param type
 * @returns {Promise}
 */
export function handleAlert(text = "操作成功", type = "success") {
  return Message({
    showClose: true,
    message: text,
    type: type
  });
}

/**
 * @description: iframe 下载文件
 * @param downUrl {type} 下载地址
 * @param outTime {type} 销毁时间 = 超时
 * @return: 
 */
export function iframeDownload(downUrl, outTime = 60 * 100000) {
  const prefix = process.env.NODE_ENV === 'development' ? '/api' : ''
  const iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  if (!/^(http|ftp|https):\/\/.*/.test(downUrl)) {
    downUrl = prefix + downUrl
  }
  iframe.src = encodeURI(downUrl)
  document.body.appendChild(iframe)
  setTimeout(
    // eslint-disable-next-line func-names
    function () {
      this.remove()
    }.bind(iframe),
    outTime
  )
  iframe.onload = () => {
    // 拿到iframe 的window对象
    const iframeWin = iframe.contentWindow 
    window.haha = iframe
    if (/(errorMessage|msg)/.test(iframeWin.document.body.innerText)) { 
      // window.document.body.innerText获取页面上的纯文本
      const obj = JSON.parse(iframeWin.document.body.innerText)
      Message({
        message: obj.errorMessage || obj.msg || '未知错误',
        type: 'error',
        duration: 2 * 1000
      })
    }
  }
}

/**
 * @method: 文本复制
 * @param {type} 
 * @return: 
 * @Author: yamanashi12（[email protected]）
 * @Date: 2019-09-06 17:35:44
 */
export function copyText(str) {
  const target = document.createElement('div')
  target.id = 'tempTarget'
  target.style.opacity = '0'
  target.innerText = str
  const range = document.createRange()
  const target2 = document.body.appendChild(target)
  try {
    range.selectNode(target)
    window.getSelection().removeAllRanges()
    window.getSelection().addRange(range)
    document.execCommand('copy')
    window.getSelection().removeAllRanges()
    Message.success('复制成功')
  } catch (e) {
    Message.success('复制失败')
  }
  target.remove()
  target2.remove()
}

// 记录和显示错误
function errorLog (error) {
  // 添加到日志
  store.dispatch('d2admin/log/push', {
    message: '数据请求异常',
    type: 'danger',
    meta: {
      error
    }
  })
  // 打印到控制台
  if (process.env.NODE_ENV === 'development') {
    util.log.danger('>>>>>> Error >>>>>>')
    console.log(error)
  }
  // 显示提示
  Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
  })
}

// response interceptor
service.interceptors.response.use(
  response => {
    if(response.headers.token){
      //如果后台通过header返回token，说明token已经更新，则更新客户端本地token
      store.dispatch('user/updateToken',{token:response.headers.token})
    }
    return response.data;
  },
  error => {
    console.log(error)
    console.log(error.response)
    if(error.response.status === 401){
      store.dispatch('user/logout').then(()=>{
        router.replace({
          path: '/login',
          query:{redirect:router.currentRoute.path}
        })
      })
      return
    }
    Message({
      message: error.response.data || error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

/**
 * @description 数据请求成功
 * @param {String} msg 成功信息
 */
export function successMsg (msg) {
  Message({
    message: msg,
    type: 'success',
    duration: 5 * 1000
  })
}

/**
 * @description 数据404消息提示
 * @param {String} msg 错误信息
 */
export function dataNotFound (msg) {
  // 显示提示
  Message({
    message: msg,
    type: 'info',
    duration: 5 * 1000
  })
}

/**
 * @description 记录和显示错误
 * @param {Error} error 错误对象
 */
export function errorLog (error) {
  // 添加到日志
  store.dispatch('d2admin/log/push', {
    message: '数据请求异常',
    type: 'danger',
    meta: {
      error
    }
  })
  // 打印到控制台
  if (process.env.NODE_ENV === 'development') {
    util.log.danger('>>>>>> Error >>>>>>')
    console.log(error)
  }
  // 显示提示
  Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
  })
}

/**
 * @description 记录和显示错误
 * @param {Error} error 错误对象
 */
export function errorLog (error) {
  // 添加到日志
  store.dispatch('d2admin/log/push', {
    message: '数据请求异常',
    type: 'danger',
    meta: {
      error
    }
  })
  // 打印到控制台
  if (process.env.NODE_ENV === 'development') {
    util.log.danger('>>>>>> Error >>>>>>')
    console.log(error)
  }
  // 显示提示
  Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
  })
}

// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.repCode == '0000') {
      return res
    }
    else if (res.repCode == '0024') {
     
      //登录超时或被登出，弹确认框，用户确认后，跳转到登录页面
      MessageBox({
        message: "当前登录已失效或异地登录，请重新登录",
        type: 'error',
        duration: 3 * 1000,
      }).then(() => {
        console.log(1)
        sessionStorage.clear();
        localStorage.clear();
        // location.reload();
        window.location.href = "/";
      }).catch(err => {
        console.log(2)
      })
    }else if(res.repCode == "3100" || res.repCode == "3101"){
      return res;
    }
    else {
      Message({
        message: res.repMsg,
        type: 'error',
        duration: 3 * 1000
      })
      return res;
    }
  },
  error => {
    var errorStatus = error.response.status;
    var errorData = error.response.data;
    var messageTxt = "";
    if (errorStatus != 200) {
      messageTxt = "服务器内部错误，请联系管理员";
    } else {
      messageTxt = '失败原因：' + errorData.repCode + '--' + errorData.repMsg;
    }
    Message({
      message: messageTxt,
      type: 'error',
      duration: 5 * 1000
    })
  }
)

// no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()
  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          await store.dispatch('user/getInfo')
          const accessRoutes  = await store.dispatch('menu/getSideMenus');
          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          console.log(error)
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

// no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          // get user info
          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          const { roles } = await store.dispatch('user/getInfo')

          // generate accessible routes map based on roles
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

          // dynamically add accessible routes
          router.addRoutes(accessRoutes)

          // hack method to ensure that addRoutes is complete
          // set the replace: true, so the navigation will not leave a history record
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

/**
 * response 过滤器
 *
 * @export
 * @param {*} res
 * @returns
 */
export default function sideEffectDefault(state, res) {
  const { options = {} } = res
  if (state === 'start') {
    if (options && options.context) {
      // eslint-disable-next-line no-underscore-dangle
      if (options.context._isVue) {
        options.context.loading = true
      } else if (options.context.nodeType === 1) { // options为dom对象则修改disabled状态
        if (options.context.parentNode.disabled !== undefined) {
          options.context = options.context.parentNode
        }
        options.context.disabled = true
      }
    }
  } else if (state === 'complete') {
    if (options && options.context) {
      // eslint-disable-next-line no-underscore-dangle
      if (options.context._isVue) {
        options.context.loading = false
        options.context = null
      } else if (options.context.nodeType === 1) { // options为dom对象则修改disabled状态
        options.context.disabled = false
      }
    }
    if (options && options.successMsg) {
      Message({
        message: options.successMsg,
        type: 'success',
        duration: 2 * 1000
      })
    }
  } else if (state === 'filterError' || state === 'ajaxError') {
    if (options.isErrorMessage) return
    options.isErrorMessage = true
    if (options && options.context) {
      // eslint-disable-next-line no-underscore-dangle
      if (options.context._isVue) {
        options.context.loading = false
        options.context = null
      } else if (options.context.nodeType === 1) { // options为dom对象则修改disabled状态
        options.context.disabled = false
      }
    }
    if (!(options && options.errorMsg === 'none')) {
      Message({
        message: options.errorMsg || res.error.responseText || '网络错误',
        type: 'error',
        duration: 2 * 1000
      })
    }
  }
}

/**
 * response 过滤器
 *
 * @export
 * @param {*} res
 * @returns
 */
export default function filterResponse(config = {}, res = {}) {
  const { options = {} } = config
  if (options.noCheck) { 
    // 忽略过滤器
    return {
      data: res.data,
      response: res
    }
  }
  if (res.code === 400) {
    if (options.preview302) {
      httpError302()
    } else if (options.noAuth) {
      // 开发环境登录鉴权
      Message({
        message: '请先到特定系统登录',
        type: 'error',
        duration: 2 * 1000
      })
      // eslint-disable-next-line no-throw-literal
      throw {
        response: res,
        status: res.status,
        request: res.request,
        responseText: res.data && (res.data.errorMessage || res.data.msg) ? res.data.errorMessage || res.data.msg : '网络错误',
        errorCode: res.data && (res.data.errorCode || res.data.code) !== undefined ? res.data.errorCode || res.data.code : 1
      }
    } else if (!isDev) {
      Message({
        message: '请先登录',
        type: 'error',
        duration: 2 * 1000,
        onClose() {
          window.location.href = loginLink
        }
      })
      // 正式环境未登录跳转
      window.location.href = loginLink
    } 
  } else if (res.data && res.data.code === 2 && !isDev && !options.noAuth) {
    Message({
      message: '无权限',
      type: 'error',
      duration: 2 * 1000,
      onClose() {
        window.location.href = loginLink
      }
    })
  } else if (!res.data || (res.data.errorCode !== 0 && res.data.code !== 0) || res.status !== 200) {
    // eslint-disable-next-line
    throw {
      response: res,
      status: res.status,
      request: res.request,
      responseText: res.data && (res.data.errorMessage || res.data.msg) ? res.data.errorMessage || res.data.msg : '网络错误',
      errorCode: res.data && (res.data.errorCode || res.data.code) !== undefined ? res.data.errorCode || res.data.code : 1
    }
  }
  return {
    data: res.data.data,
    response: res
  }
}

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

// no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // 如果已登录，则重定向到主页
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // 通过getInfo判断用户是否获得了他的权限角色
      const hasRoles = store.getters.menuTree && store.getters.menuTree.length > 0
      console.log('hasRoles',hasRoles)
      if (hasRoles) {
        next()
      } else {
        try {
          // get user info
          // 注意：menuTree、roleCodes 必须是一个数组
          const { roleCodes, menuTree } = await store.dispatch('user/getInfo')

          // 根据后端路由表生成可访问的路由
          const accessRoutes = await store.dispatch('permission/generateRoutes', { roleCodes, menuTree })

          // 动态添加可访问的路由
          console.log('可访问的路由',accessRoutes)

          router.addRoutes(accessRoutes)

          // hack 方法来确保 addRoutes 是完整的
          // 设置 replace: true, 这样导航就不会留下历史记录
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})