[FE]考勤路由权限

security-protection-platform/.aid/aid.js

const { join } = require('path')
const { name } = require('../package.json')
function resolve(dir) {
function resolve (dir) {
  return join(__dirname, dir)
}
const subappURL = 'http://localhost:5000/'
function rules(config) {
function rules (config) {
  let rules = config.module.rules.map(v => {
    if(v.test.toString() === '/\\.css/') {
    if (v.test.toString() === '/\\.css/') {
      return {
        test: /\.css/,
        use: [require.resolve('style-loader'), require.resolve('css-loader')]
  cssExt: ".scss", //入口css文件后缀名
  autocheck: ['aid-elements-desktop', 'aid-font', 'aid-desktop'],
  strict: false,
  beforeDev(config) {
  beforeDev (config) {
    return rules(config)
  },
  beforeBuild(config) {
  beforeBuild (config) {
    let result = rules(config)
    result.output = {
      publicPath: '/'
  //hmrPath: subappURL, // 作为子应用必须启用
  //imagePrefix: url => `${subappURL}/asset/image/${url}`, // 作为子应用必须启用
  //fontPrefix: url => `${subappURL}/asset/font/${url}`, // 作为子应用必须启用
  outputPrefix: '/' // 构建后index.html中资源路径的前缀
  outputPrefix: '/',// 构建后index.html中资源路径的前缀
  proxy: [
    {
      url: '/sp',
      options: {
        target: 'http://10.19.90.34:8018',
        changeOrigin: true,
        pathRewrite: {
          '^/sp': '/'
        }
      }
    },
  ]
}

security-protection-platform/src/api/login/index.js

    return $default.post('/sp/login/login', data).then(resp => {
      return resp.data
    })
  },
  // 获取用户菜单权限
  findMenus (data) {
    return $default.post('/sp/login/findMenus', data).then(resp => {
      return resp.data
    })
  }
}
export default api

security-protection-platform/src/conf/axios.config.js

  },
  root: {
    default: {
      baseURL: 'http://10.19.90.34:8018'
      // baseURL: 'http://10.19.90.34:8018'
      // baseURL: 'http://localhost:8018'
      // baseURL: '/'
      baseURL: '/sp'
    },
    picurl: {
      baseURL: 'http://10.19.90.34:19000/tool-image/'

security-protection-platform/src/http.js

import config from './conf/axios.config.js'
/* eslint no-useless-escape: "off" */
/* eslint no-prototype-builtins: "off" */
/**
 * 深度合并多个对象，返回合并后的新对象
 * @private

security-protection-platform/src/main.js

// const hls = require('videojs-contrib-hls')
// Vue.use(hls)
import axios from 'axios'
axios.defaults.withCredentials = true
// 安装组件库插件
Vue.use(aid, {
  local: i18nManager.language,

security-protection-platform/src/modules/login/index.vue

        <h3 class="welcome">欢迎登录 <span class="system-name">AISI安防一体化管理平台</span></h3>
        <t-form ref="loginForm" :model="loginForm" :rules="loginFormRules">
          <t-form-item prop="userName">
            <t-input v-model="loginForm.userName" placeholder="admin" icon="user-outline" >
            <t-input v-model="loginForm.userName" placeholder="admin" icon="user-outline">
            </t-input>
          </t-form-item>
          <t-form-item prop="password">
            <t-input v-model="loginForm.password" placeholder="Abc@1234" type="password" icon="lock-outline" >
            <t-input v-model="loginForm.password" placeholder="Abc@1234" type="password" icon="lock-outline">
            </t-input>
          </t-form-item>
          <t-form-item prop="verifyCode">
            <t-input v-model="loginForm.verifyCode"
                     placeholder="请输入验证码" >
              <img slot="append"
                   :src="verifiyCode"
                   title="点击以刷新验证码"
                   style="height:30px; margin: 0 -12px;cursor:pointer"
                   @click="onVerifiyCodeClick"/>
            <t-input v-model="loginForm.verifyCode" placeholder="请输入验证码">
              <img slot="append" :src="verifiyCode" title="点击以刷新验证码" style="height:30px; margin: 0 -12px;cursor:pointer" @click="onVerifiyCodeClick" />
            </t-input>
          </t-form-item>
          <t-form-item class="mb-0">
            <t-button :loading="loging"
                      color="primary"
                      block
                      @click="onLoginButtonClick">
            <t-button :loading="loging" color="primary" block @click="onLoginButtonClick">
              <span v-if="!loging">登录</span>
              <span v-else>正在登录...</span>
            </t-button>
import loginbg from '@/assets/images/loginbg.png'
import verifiyCode from '@/assets/images/verifiyCode.jpg'
import loginapi from '@/api/login'
import store from '@/store'
export default {
  filters: {
  },
  components: {
  },
  data() {
  data () {
    return {
      loginbg: loginbg,
      loging: false,
  computed: {
  },
  mounted () {
    let userName = localStorage.getItem('userName')
    if (userName) {
      this.loginForm.userName = userName
      this.rememberMe = true
    }
  },
  methods: {
    onVerifiyCodeClick() {
    onVerifiyCodeClick () {
    },
    onLoginButtonClick () {
      if (this.loging) {
      this.loging = true
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          loginapi.doLogin({userCode: this.loginForm.userName, passWord: this.loginForm.password}).then((data) => {
          loginapi.doLogin({ userCode: this.loginForm.userName, passWord: this.loginForm.password }).then(async (data) => {
            this.$store.commit('setLogged', true)
            if (this.rememberMe) {
              localStorage.setItem('userName', data.userName)
              localStorage.setItem('userName', data.RESULT.CODE)
            } else {
              localStorage.removeItem('userName')
            }
            const res = await loginapi.findMenus({ userCode: data.RESULT.CODE })
            var map = new Map()
            res.RESULT.forEach(e => {
              if (e.ROOT_MENU) {
                map.set(e.ROOT_MENU[0].VIEWNAME, e.ROOT_MENU[0].ID)
              }
              // 第六个考勤报表没有 menu_list
              if (e.menu_list) {
                map.set(e.menu_list[0].VIEWNAME, e.ID)
              }
              if (e.child_list) {
                const str = e.child_list[0].menu_list[0].VIEWNAME
                map.set(str.substr(0, str.indexOf('/', 1)), parseInt(Math.random() * 1000000))
                e.child_list.forEach(m => {
                  map.set(m.menu_list[0].VIEWNAME, m.ID)
                  if (m.child_list) {
                    m.child_list.forEach(mn => {
                      map.set(mn.menu_list[0].VIEWNAME, mn.ID)
                    })
                  }
                })
              }
            })
            localStorage.setItem('menus', JSON.stringify(map))
            sessionStorage.setItem('isLogged', true)
            this.$router.push({ name: 'dashboard' })
          }).catch((e) => {
            this.loging = false
</script>
<style lang="scss">
.index{
  height:100vh;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  .user-form-box{
.index {
  height: 100vh;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  .user-form-box {
    padding: 20px 40px 20px 40px;
    background-color: #003561;
    position:fixed;
    left:70%;
    top:20%;
    position: fixed;
    left: 70%;
    top: 20%;
    width: 25%;
    height: 65%;
    .from{
    .from {
      width: 100%;
      height: 100%;
      .hello {
        height:36px;
        font-size:26px;
        font-weight:500;
        height: 36px;
        font-size: 26px;
        font-weight: 500;
        color: white;
        line-height:36px;
        line-height: 36px;
        margin-bottom: 4px;
      }
      .welcome {
        height:36px;
        font-size:14px;
        font-weight:500;
        color:rgba(0,0,0,1);
        line-height:36px;
        height: 36px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        line-height: 36px;
        margin-bottom: 24px;
        color: white;
      }
      .system-name {
        font-size: 14px;
        font-weight: 500;
        color: #0079BE;
        color: #0079be;
      }
    }
  }

security-protection-platform/src/router.js

  router.beforeEach(async (to, from, next) => {
    // TGlobalLoading.start()
    // const accessRoutes = await store.dispatch('permission/generateRoutes', 'user')
    next()
    /*
     * 在每次视图切换时检查当前用户是否处于登
     * 录状态，如果没有登录则跳转到登录视图
     * 注意此时是调用getter中的isLogged获
     * 取客户端缓存的登录状态。
     * 真实登录状态仅在应用初始化和每次服务
     * 调用时检查即可，在视图（路由）切换时，
     * 为了提升视图切换性能（少请求一次服务），
     * 只需要调用getter中的isLogged进行简
     * 单客户端判断。
     * 参见src/frame.vue和src/store.js文件中的逻辑。
     */
    let isLogged = router.app.$options.store.getters.getLogged || sessionStorage.getItem('isLogged')
    console.log(isLogged)
    if (to.meta.ignoreAuth === true) {
      if (isLogged === true && to.path === '/login') {
        router.replace({ name: 'dashboard' })
      } else {
        next()
      }
    } else {
      if (isLogged === false) {
        router.replace({ name: 'login' })
      } else {
        next()
      }
    }
  })
  router.afterEach(() => {

security-protection-platform/src/routes.js

    name: 'login',
    path: '/login',
    component: () => import('./modules/login'),
    meta: { title: '登录页', icon: 'home', ignoreAuth: true},
    meta: { title: '登录页', icon: 'home', ignoreAuth: true },
    hidden: true
  },
  {
        meta: { title: '首页', icon: 'home' }
      }
    ]
  },
  }
]
/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 */
// 异步挂载的路由
// 动态需要根据权限加载的路由表
export const asyncRoutes = [
  {
    path: '/videoSurveillance',
    component: Layout,
  {
    path: '/access',
    component: Layout,
    meta: { icon: 'file-solution-outline' },
    meta: { title: '识别记录', icon: 'file-solution-outline' },
    children: [
      {
        name: 'access',
  {
    path: '/alarm',
    component: Layout,
    meta: { icon: 'bell' },
    meta: { title: '智能报警', icon: 'bell' },
    children: [
      {
        name: 'ai_alarm',
  }, {
    path: '/workorder',
    component: Layout,
    meta: { icon: 'calendar-outline' },
    meta: { title: '假勤管理', icon: 'calendar-outline' },
    children: [
      {
        name: 'workorder',
    children: [
      {
        name: 'report',
        path: 'report',
        path: '/attendance/report',
        component: () => import(/* webpackChunkName: "report" */ './modules/attendance/report'),
        meta: { title: '考勤报表' }
      }, {
        name: 'abnormal',
        path: 'abnormal',
        path: '/attendance/abnormal',
        component: () => import(/* webpackChunkName: "abnormal" */ './modules/attendance/abnormal'),
        meta: { title: '异常考勤' }
      }
    ]
  }, {
  },
  {
    path: '/system',
    component: Layout,
    meta: { title: '系统管理', icon: 'setting' },
    children: [
      {
        name: 'sys_devicemana',
        path: 'devicemana',
        path: '/system/devicemana',
        component: () => import(/* webpackChunkName: "sys_devicemana" */ './modules/system/devicemana'),
        meta: { title: '设备管理' }
      },
      {
        name: 'sys_task',
        path: 'assignment',
        path: '/system/assignment',
        component: () => import(/* webpackChunkName: "sys__task" */ './modules/system/assignment'),
        meta: { title: '任务管理' }
      },
      {
        name: 'sys_monitor',
        path: 'monitor',
        path: '/system/monitor',
        component: () => import(/* webpackChunkName: "sys_monitor" */ './modules/system/monitor'),
        meta: { title: '监控布局' }
      },
      {
        name: 'sys_attendance',
        path: 'attendance',
        path: '/system/attendance',
        component: () => import(/* webpackChunkName: "sys_attendance" */ './modules/system/attendance'),
        meta: { title: '考勤配置' }
      },
      }
    ]
  },
  {
    path: '/usermana',
    component: Layout,
    meta: { title: '用户管理', icon: 'user-outline' },
    children: [
      {
        name: 'usermana',
        path: 'usermana',
        path: '/usermana',
        component: () => import(/* webpackChunkName: "user_rights" */ './modules/usermana'),
        meta: { title: '用户管理'}
        meta: { title: '用户管理', icon: 'user-outline' }
      }
    ]
  },
  }
]
/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 */
export const asyncRoutes = []
export default constantRoutes.concat(asyncRoutes)

security-protection-platform/src/store/index.js

      isLogged: false
    },
    mutations: {
      setLogged(state, token) {
      setLogged (state, token) {
        state.isLogged = token
        console.log(token)
      }
    }
  })

security-protection-platform/src/store/modules/permission.js

import { asyncRoutes, constantRoutes } from '@/routes'
/*
 * Use meta.role to determine if the current user has permission
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
function hasPermission (permission, route) {
  // if (route.meta && route.meta.roles) {
  //   return roles.some(role => route.meta.roles.includes(role))
  // } else {
  //   return true
  // }
  var x = false
  permission.forEach(e => {
    if (e[0] === route.path) {
      x = true
    }
  })
  return x
}
/**
 * @param routes asyncRoutes
 * @param roles
 */
export function filterAsyncRoutes(routes, roles) {
  const res = []
// export function filterAsyncRoutes (routes, roles) {
//   const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
//   routes.forEach(route => {
//     const tmp = { ...route }
//     if (hasPermission(roles, tmp)) {
//       if (tmp.children) {
//         tmp.children = filterAsyncRoutes(tmp.children, roles)
//       }
//       res.push(tmp)
//     }
//   })
//   return res
// }
function filterAsyncRoutes (routerMap, roles, map) {
  const accessedRouters = routerMap.filter(route => {
    // if (hasPermission(roles.permissionList, route) && map[route.path] || route.path === '/') {
    if (hasPermission(map, route) || route.path === '/') {
      if (route.children && route.children.length) {
        route.children = filterAsyncRoutes(route.children, roles, map)
      }
      res.push(tmp)
      return true
    }
    return false
  })
  return res
  return accessedRouters
}
const state = {
}
const actions = {
  generateRoutes({ commit }, roles) {
  // generateRoutes ({ commit }, roles) {
  //   return new Promise(resolve => {
  //     let accessedRoutes
  //     if (roles.includes('admin')) {
  //       accessedRoutes = asyncRoutes || []
  //     } else {
  //       accessedRoutes = filterAsyncRoutes(asyncRoutes, roles,menus)
  //     }
  //     commit('SET_ROUTES', accessedRoutes)
  //     resolve(accessedRoutes)
  //   })
  // }
  generateRoutes ({ commit }, roles) {
    var menus = JSON.parse(localStorage.getItem('menus'))
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
      let accessedRouters
      accessedRouters = filterAsyncRoutes(asyncRoutes, roles, menus)
      commit('SET_ROUTES', accessedRouters)
      resolve()
    })
  }
}