vue+elementui+echarts+token做登录校验和报表

源码和示例

涉及到的技术内容

  • vue+vue-router等
  • cookie+jwt操作
  • element-ui
  • echarts使用

api

我将所有涉及到对外接口的文件放在这里统一管理,其中config.js存放跟后端统一的状态码

http.js处理axios

http.js里面存放axios操作,我在每次请求前,判断cookie里是否存在token,不存在的话直接跳到登录页面

  axios.interceptors.request.use(config => {
  if (!containCookie('token')) {
    jumpTo(codeState.pageLogin)
  }
  return config
})

在axios响应时,通过判断状态码来决定是否需要终端后续操作

  axios.interceptors.response.use(res => {
  let code = res.data.code + ''
  switch (code) {
    // 用户名密码错误
    case codeState.adminError:
      vm.$message({
        message: '用户名密码错误',
        showClose: true,
        type: 'warning',
        duration: 3000
      })
      break
    // 转到 登录页面
    case codeState.adminRelogin:
      vm.$message({
        message: '授权未通过,请重新登录',
        type: 'warning',
        showClose: true,
        duration: 3000,
        onclose: jumpTo(codeState.adminRelogin)
      })
      break
  }
  return res
}, error => {
  vm.$message({
    message: error,
    type: 'warning',
    showClose: true,
    duration: 3000
  })
})

在headers里,将自定义属性HTTP_ACCESS_TOKEN加入,并在每次都发送到服务端

uri.js

在这里我讲所有路由相关的变量统一存储,以便后续管理

  import {codeState} from './config'

/***********************************
 * 前端路由
 * @type {string}
 */
export const login = '/#/login'
export const report = '/#/report'
export const page404 = '/#/page404'

/********************************
 * 接口路由
 * @param uriCode
 */
export const rootHref = 'http://mazhaoyang.cn/index.php/Home/Output/'
export const loginRemote = rootHref + 'reportAdmin.html'
export const reportReport1 = rootHref + 'reportReport1.html'
export const reportStasticsNumber = rootHref + 'reportStasticsNumber.html'
export const reportStasticsWeight = rootHref + 'reportStasticsWeight.html'
export const reportStatisticNumMonth = rootHref + 'reportStatisticNumMonth.html'

/********************************
 * 路由跳转
 * @param uriCode
 */
export function jumpTo (uriCode) {
  switch (uriCode) {
    // 未登录
    case codeState.adminRelogin:
      window.location.href = login
      break
    // 登录成功
    case codeState.adminLoaded:
      window.location.href = report
      break
    // 页面未找到
    case codeState.page404:
      window.location.href = page404
      break
  }
}

echarts的使用

引入echart组件之后,操作方法跟pc上一样,通过myChart.setOption(option, true)将echarts进行初始化

随机浏览