admin登录

src/api/login.js

@@ -1,14 +1,10 @@
import request from '@/utils/request'
export function login(account, pw, vc) {
export function login(params) {
  return request({
    url: '/ajax/sys/login',
    method: 'post',
    data: {
      account,
      pw,
      vc
    }
    params
  })
}

src/directive/permission/index.js

@@ -1,13 +0,0 @@
import permission from './permission'
const install = function(Vue) {
  Vue.directive('permission', permission)
}
if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}
permission.install = install
export default permission

src/directive/permission/permission.js

@@ -1,23 +0,0 @@
import store from '@/store'
export default{
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.getters && store.getters.roles
    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value
      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
    }
  }
}

src/permission.js

@@ -1,48 +1,49 @@
// import router from './router'
// import store from './store'
// import NProgress from 'nprogress' // Progress 进度条
// import 'nprogress/nprogress.css'// Progress 进度条样式
import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
// import { Message } from 'element-ui'
// import { getToken } from '@/utils/auth' // 验权
// NProgress.configure({ showSpinner: false })// NProgress Configuration
NProgress.configure({ showSpinner: false })// NProgress Configuration
// const whiteList = ['/login', '/authredirect'] // 不重定向白名单
// router.beforeEach((to, from, next) => {
//   NProgress.start()
//   if (getToken()) {
//     if (to.path === '/login') {
//       // next({ path: '/' })
//       NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
//     } else {
//       if (store.getters.roles.length === 0) {
//         store.dispatch('GetUserInfo').then(res => { // 拉取用户信息
//           next()
//           // const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
//           // store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
//           //   router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
//           //   next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
//           // })
//         }).catch((err) => {
//           store.dispatch('FedLogOut').then(() => {
//             Message.error(err || 'Verification failed, please login again')
//             next({ path: '/' })
//           })
//         })
//       } else {
//         next()
//       }
//     }
//   } else {
//     if (whiteList.indexOf(to.path) !== -1) {
//       next()
//     } else {
//       // next('/login')
//       NProgress.done()
//     }
//   }
// })
// const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  NProgress.start()
  // if (getToken()) {
  if (to.path === '/login') {
    // next({ path: '/' })
    NProgress.done() // if current page is dashboard will not trigger  afterEach hook, so manually handle it
  } else {
    if (store.getters.roles.length === 0) {
      store.dispatch('GetUserInfo').then(res => { // 拉取用户信息
        // next()
        const roles = '1' // note: roles must be a array! such as: ['editor','develop']
        store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
          router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
          next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
        })
      })
      // .catch((err) => {
      //   store.dispatch('FedLogOut').then(() => {
      //     // Message.error(err || 'Verification failed, please login again')
      //     next({ path: '/' })
      //   })
      // })
    } else {
      next()
    }
  }
  // } else {
  //   if (whiteList.indexOf(to.path) !== -1) {
  //     next()
  //   } else {
  //     // next('/login')
  //     NProgress.done()
  //   }
  // }
})
// router.afterEach(() => {
//   NProgress.done() // 结束Progress
// })
router.afterEach(() => {
  NProgress.done() // 结束Progress
})

src/router/index.js

@@ -44,11 +44,12 @@ export const constantRouterMap = [
    hidden: true,
    children: [{
      path: 'dashboard',
      component: () => import('@/views/dashboard/index'),
      component: () => import('@/views/dashboard'),
      name: 'dashboard',
      meta: { title: '主页', noCache: true }
    }]
  }
]
// 实例化vue的时候只挂载constantRouter
@@ -66,12 +67,12 @@ export const asyncRouterMap = [
  {
    path: '/peoplesManage',
    component: Layout,
    redirect: '/peoplesManage/infoManage/index',
    redirect: '/peoplesManage/infoManage',
    name: 'peoplesManage',
    meta: {
      title: '用户系统管理',
      icon: 'peoples',
      roles: ['admin']
      roles: ['1']
    },
    alwaysShow: true,
    children: [
@@ -86,12 +87,12 @@ export const asyncRouterMap = [
  {
    path: '/baseInfoManage',
    component: Layout,
    redirect: '/baseInfoManage/bridgesInfo/index',
    redirect: '/baseInfoManage/bridgesInfo',
    name: 'BaseInfoManage',
    meta: {
      title: '基础信息管理',
      icon: 'list',
      roles: ['admin']
      roles: ['1']
    },
    children: [
      {
@@ -126,7 +127,7 @@ export const asyncRouterMap = [
    component: Layout,
    redirect: '/bridgesConsole/bridgeDetail',
    meta: {
      roles: ['other']
      roles: ['0']
    },
    children: [
      {

src/store/getters.js

@@ -1,13 +1,9 @@
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  status: state => state.user.status,
  roles: state => state.user.roles,
  permission_routers: state => state.permission.routers,
  addRouters: state => state.permission.addRouters,
  errorLogs: state => state.errorLog.logs
  addRouters: state => state.permission.addRouters
}
export default getters

src/store/index.js

@@ -1,7 +1,6 @@
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import errorLog from './modules/errorLog'
import permission from './modules/permission'
import user from './modules/user'
import getters from './getters'
@@ -11,7 +10,6 @@ Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    errorLog,
    permission,
    user
  },

src/store/modules/errorLog.js

@@ -1,17 +0,0 @@
const errorLog = {
  state: {
    logs: []
  },
  mutations: {
    ADD_ERROR_LOG: (state, log) => {
      state.logs.push(log)
    }
  },
  actions: {
    addErrorLog({ commit }, log) {
      commit('ADD_ERROR_LOG', log)
    }
  }
}
export default errorLog

src/store/modules/permission.js

@@ -47,7 +47,7 @@ const permission = {
      return new Promise(resolve => {
        const { roles } = data
        let accessedRouters
        if (roles.indexOf('admin') >= 0) {
        if (roles.indexOf('1') >= 0) {
          accessedRouters = asyncRouterMap
        } else {
          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)

src/store/modules/user.js

@@ -1,33 +1,16 @@
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { login, logout } from '@/api/login'
// import { getToken, setToken, removeToken } from '@/utils/auth'
const user = {
  state: {
    user: '',
    status: '',
    code: '',
    token: getToken(),
    name: '',
    avatar: '',
    roles: []
  },
  mutations: {
    SET_CODE: (state, code) => {
      state.code = code
    },
    SET_STATUS: (state, status) => {
      state.status = status
    },
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    }
@@ -36,12 +19,22 @@ const user = {
  actions: {
    // 用户名登录
    LoginByUsername({ commit }, userInfo) {
      const username = userInfo.username.trim()
      console.log(userInfo)
      const account = userInfo.username.trim()
      const pw = userInfo.password.trim()
      const vc = userInfo.imgVerifyCode.trim()
      const param = {
        account,
        pw,
        vc
      }
      return new Promise((resolve, reject) => {
        login(username, userInfo.password, vc).then(response => {
          // const data = response.data
          // commit('SET_TOKEN', data.token)
          setToken(response.data.token)
        login(param).then(response => {
          console.log(response)
          // if (response.success) {
          //   const data = response.data
          // }
          // setToken(response.data.type)
          resolve()
        }).catch(error => {
          reject(error)
@@ -51,34 +44,32 @@ const user = {
    // 获取用户信息
    GetUserInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(response => {
          if (response.success) {
            console.log(response)
          }
          // if (!response.data) { // 由于mockjs 不支持自定义状态码只能这样hack
          //   reject('error')
          // }
          // const data = response.data
          // if (data.type) { // 验证返回的roles是否是一个非空数组
          //   commit('SET_ROLES', data.type)
          // }
          // commit('SET_NAME', data.name)
          // commit('SET_AVATAR', data.avatar)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
      commit('SET_ROLES', '0')
      // return new Promise((resolve, reject) => {
      //   getInfo().then(response => {
      //     if (response.success) {
      //       console.log(response)
      //     }
      //     const data = response.data
      //     if (data.type) {
      //       commit('SET_ROLES', data.type)
      //     }
      //     // commit('SET_NAME', data.name)
      //     // commit('SET_AVATAR', data.avatar)
      //     resolve(response)
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },
    // 登出
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          removeToken()
          commit('SET_ROLES', '')
          // removeToken()
          resolve()
        }).catch(error => {
          reject(error)
@@ -89,8 +80,7 @@ const user = {
    // 前端 登出
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '')
        removeToken()
        // removeToken()
        resolve()
      })
    }

src/utils/auth.js

@@ -1,15 +1,15 @@
import Cookies from 'js-cookie'
// import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
// const TokenKey = 'Admin-Token'
export function getToken() {
  return Cookies.get(TokenKey)
}
// export function getToken() {
//   return Cookies.get(TokenKey)
// }
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
// export function setToken(token) {
//   return Cookies.set(TokenKey, token)
// }
export function removeToken() {
  return Cookies.remove(TokenKey)
}
// export function removeToken() {
//   return Cookies.remove(TokenKey)
// }

src/utils/permission.js

@@ -1,26 +0,0 @@
import store from '@/store'
/**
 * @param {Array} value
 * @returns {Boolean}
 * @example see @/views/permission/directive.vue
 */
export default function checkPermission(value) {
  if (value && value instanceof Array && value.length > 0) {
    const roles = store.getters && store.getters.roles
    const permissionRoles = value
    const hasPermission = roles.some(role => {
      return permissionRoles.includes(role)
    })
    if (!hasPermission) {
      return false
    }
    return true
  } else {
    console.error(`need roles! Like v-permission="['admin','editor']"`)
    return false
  }
}

src/views/dashboard/admin/index.vue

@@ -53,6 +53,9 @@ export default {
  components: {
    LineChart
  },
  created() {
    this.toPath()
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis
@@ -61,6 +64,9 @@ export default {
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    toPath() {
      this.$router.push({ path: '/peoplesManage/infoManage' })
    }
  }
}

src/views/dashboard/index.vue

@@ -23,9 +23,9 @@ export default {
    ])
  },
  created() {
    // if (this.roles !== 1) {
    //   this.currentRole = 'otherDashboard'
    // }
    if (this.roles.includes('0')) {
      this.currentRole = 'otherDashboard'
    }
  }
}
</script>

src/views/layout/components/Navbar.vue

@@ -17,8 +17,7 @@ export default {
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
      'sidebar'
    ])
  },
  methods: {

src/views/layout/components/TopNavbar.vue

@@ -5,17 +5,15 @@
    </div>
    <el-dropdown class="avatar-container" trigger="click">
      <div class="avatar-wrapper">
        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
      	<div>您好，{ name }</div>
        <i class="el-icon-caret-bottom"></i>
      </div>
      <el-dropdown-menu class="user-dropdown" slot="dropdown">
        <router-link class="inlineBlock" to="/">
          <el-dropdown-item>
            Home
          </el-dropdown-item>
          <el-dropdown-item>主页</el-dropdown-item>
        </router-link>
        <el-dropdown-item divided>
          <span @click="logout" style="display:block;">LogOut</span>
          <span @click="logout" style="display:block;">退出</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
@@ -28,8 +26,7 @@ import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
      'name'
    ])
  },
  methods: {

src/views/login/authredirect.vue

@@ -1,10 +0,0 @@
<script>
  export default {
    name: 'authredirect',
    created() {
      const hash = window.location.search.slice(1)
      window.opener.location.href = window.location.origin + '/login#' + hash
      window.close()
    }
  }
</script>

src/views/login/index.vue

@@ -53,11 +53,11 @@ export default {
      }
    }
    return {
      imgVerifyCode: '',
      imgVcUrl: '',
      loginForm: {
        username: '',
        password: ''
        password: '',
        imgVerifyCode: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validPhone }],
@@ -83,10 +83,12 @@ export default {
      }
    },
    handleLogin() {
      alert(111)
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
            alert(333)
            this.loading = false
            this.$router.push({ path: '/' })
          }).catch(() => {