权限验证登录

src/api/login.js

    method: 'post',
    data: {
      account,
      pw,
      pw
      vc
    }
  })
}

src/api/loginnew.js

export const loginUrl = '/ajax/sys/login'
export const getInfoUrl = '/ajax/sys/manager'
export const logoutUrl = '/ajax/sys/logout'

src/api/modifyAccountInformation.js

export const url = '/ajax/sys/manager'
export const modifyUrl = '/ajax/sys/manager'

src/api/modifyPassword.js

export default '/ajax/sys/manager/changepasswd' //  重置密码

src/permission.js

// import router from './router'
import router from './router'
// import store from './store'
import store from './store'
// import NProgress from 'nprogress' // Progress 进度条
import NProgress from 'nprogress' // Progress 进度条
// import 'nprogress/nprogress.css'// Progress 进度条样式
import 'nprogress/nprogress.css'// Progress 进度条样式
// import { Message } from 'element-ui'
import { Message } from 'element-ui'
// import { getCookiesName } from '@/utils/auth' // 验权
import Cookies from 'js-cookie'
// import queryInfo from '@/utils/queryInfo'
//  import queryInfo from '@/utils/queryInfo'
// NProgress.configure({ showSpinner: false })// NProgress Configuration
NProgress.configure({ showSpinner: false })// NProgress Configuration
// function hasPermission(roles, permissionRoles) {
const whiteList = ['/login', '/findPwd'] // 不重定向白名单
//   if (roles.indexOf('1') >= 0) return true
//   if (!permissionRoles) return true
//   return roles.some(role => permissionRoles.indexOf(role) >= 0)
// }
// const whiteList = ['/login', '/findPwd'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  NProgress.start()
  if (Cookies.get('userid')) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (!store.getters.account) { // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
          if (res.success && res.data) {
            store.dispatch('GenerateRoutes', res.data.rightCode).then(() => { // 根据roles权限生成可访问的路由表
              router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
              next({ ...to, replace: true })
            })
          }
        }).catch((err) => {
          store.dispatch('LogOut').then(() => {
            Message.error(err || '登录状态失效，请重新登录')
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
      //  queryInfo.queryAllInfo()
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})
// router.beforeEach((to, from, next) => {
router.afterEach(() => {
//   NProgress.start()
  NProgress.done() // 结束Progress
//   if (getCookiesName()) {
})
//     if (to.path === '/login') {
//       next({ path: '/' })
//       NProgress.done()
//     } else {
//       if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
//         store.dispatch('GetUserInfo').then(res => { // 拉取user_info
//           const roles = [res.data.type.toString()]
//           store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
//             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
//             next({ ...to, replace: true })
//           })
//         }).catch((err) => {
//           store.dispatch('FedLogOut').then(() => {
//             Message.error(err || '登录状态失效，请重新登录')
//             next({ path: '/' })
//           })
//         })
//       } else {
//         if (hasPermission(store.getters.roles, to.meta.roles)) {
//           next()
//         }
//       }
//       queryInfo.queryAllInfo()
//     }
//   } else {
//     if (whiteList.indexOf(to.path) !== -1) {
//       next()
//     } else {
//       next('/login')
//       NProgress.done()
//     }
//   }
// })
// router.afterEach(() => {
//   NProgress.done() // 结束Progress
// })

src/router/index.js

      name: 'dashboard',
      meta: { title: '主页' }
    }]
  },
  }
  {
]
    path: '',
export const asynsingle = [
    component: Layout,
    name: 'contentModule',
    redirect: 'noredirect',
    meta: { title: '内容发布' },
    children: [
      {
        path: 'content',
        component: () => import('@/views/contentPub/index'),
        name: 'content',
        redirect: '/content/pubList',
        meta: { title: '内容发布列表' },
        children: [
          {
            path: 'pubList',
            component: () => import('@/views/contentPub/pubList'),
            name: 'pubList',
            meta: { title: '内容发布列表' }
          },
          {
            path: 'publish',
            hidden: true,
            component: () => import('@/views/contentPub/publish'),
            name: 'publish',
            meta: { title: ' 新内容发布' }
          }
        ]
      },
      {
        path: 'recycle',
        component: () => import('@/views/contentPub/index'),
        name: 'recycle',
        redirect: '/recycle/recycleBinList',
        meta: { title: '内容回收站列表' },
        children: [
          {
            path: 'recycleBinList',
            component: () => import('@/views/contentPub/recycleBin'),
            name: 'recycleBinList',
            meta: { title: '内容回收站列表' }
          },
          {
            path: 'viewRecycling',
            hidden: true,
            component: () => import('@/views/contentPub/viewRecyclingBins'),
            name: 'viewRecycling',
            meta: { title: ' 查看回收内容' }
          }
        ]
      },
      {
        path: 'draftList',
        component: () => import('@/views/contentPub/draftList'),
        name: 'draftList',
        meta: { title: '内容草稿箱列表' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'demand',
    redirect: 'noredirect',
    meta: { title: '需求中心' },
    children: [
      {
        path: 'publishedList',
        component: () => import('@/views/demandCen/publishedList'),
        name: 'publishedList',
        meta: { title: '发布中需求' }
      },
      {
        path: 'expiredList',
        component: () => import('@/views/demandCen/expiredList'),
        name: 'expiredList',
        meta: { title: '已过期需求' }
      },
      {
        path: 'completedList',
        component: () => import('@/views/demandCen/completedList'),
        name: 'completedList',
        meta: { title: '已完成需求' }
      },
      {
        path: 'closedList',
        component: () => import('@/views/demandCen/closedList'),
        name: 'closedList',
        meta: { title: '已关闭需求' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'specialExperts',
    redirect: 'noredirect',
    alwaysShow: true,
    meta: { title: '特约专家' },
    children: [
      {
        path: 'expertslist',
        component: () => import('@/views/specialExperts/index'),
        name: 'publishedList',
        meta: { title: '特约专家列表' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'cooperationAgency',
    redirect: 'noredirect',
    alwaysShow: true,
    meta: { title: '合作机构' },
    children: [
      {
        path: 'agencylist',
        component: () => import('@/views/cooperationAgency/index'),
        name: 'publishedList',
        meta: { title: '合作机构管理列表' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'company',
    redirect: 'noredirect',
    meta: { title: '企业中心' },
    children: [
      {
        path: 'noactive',
        component: () => import('@/views/companyCen/noactive/index'),
        name: 'noactive',
        parentPath: true,
        redirect: { name: 'noactiveList' },
        meta: { title: '未激活企业' },
        children: [
          {
            path: 'noactiveList',
            name: 'noactiveList',
            hidden: true,
            component: () => import('@/views/companyCen/noactive/noactiveList')
          },
          {
            path: 'compHome',
            component: () => import('@/views/companyCen/noactive/compHome'),
            name: 'compHome',
            parentPath: true,
            redirect: { name: 'compInfo' },
            meta: { title: '企业信息' },
            children: [
              {
                path: 'compInfo',
                name: 'compInfo',
                hidden: true,
                component: () => import('@/views/companyCen/noactive/compInfo')
              },
              {
                path: 'productHome',
                component: () => import('@/views/companyCen/noactive/productHome'),
                name: 'productHome',
                parentPath: true,
                redirect: { name: 'compProduct' },
                children: [
                  {
                    path: 'compProduct',
                    component: () => import('@/views/companyCen/noactive/compProduct'),
                    name: 'compProduct',
                    meta: { title: '企业产品' }
                  },
                  {
                    path: 'productInfo',
                    component: () => import('@/views/companyCen/noactive/productInfo'),
                    name: 'productInfo',
                    hidden: true,
                    meta: { title: '产品详情' }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        path: 'activeList',
        component: () => import('@/views/companyCen/activeList'),
        name: 'activeList',
        meta: { title: '已激活企业' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'platinfo',
    redirect: 'noredirect',
    alwaysShow: true,
    meta: { title: '平台信息' },
    children: [
      {
        path: 'platUpdate',
        component: () => import('@/views/platInfo/platUpdate'),
        name: 'platUpdate',
        meta: { title: '修改平台信息' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'userinfo',
    redirect: 'noredirect',
    alwaysShow: true,
    meta: { title: '用户信息' },
    children: [
      {
        path: 'usingList',
        component: () => import('@/views/userInfo/usingList'),
        name: 'usingList',
        meta: { title: '正常用户' }
      },
      {
        path: 'blackList',
        component: () => import('@/views/userInfo/blackList'),
        name: 'blackList',
        meta: { title: '黑名单用户' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'sysSetting',
    redirect: 'noredirect',
    alwaysShow: true,
    meta: { title: '系统设置' },
    children: [
      {
        path: 'adminUser',
        component: () => import('@/views/sysSetting/adminUser'),
        name: 'adminUser',
        meta: { title: '平台后台用户管理列表' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'accountSettings',
    redirect: 'noredirect',
    meta: { title: '账户设置' },
    children: [
      {
        path: 'modifyInformation',
        component: () => import('@/views/accountSettings/modifyAccountInformation'),
        name: 'modifyInformation',
        meta: { title: '修改账户资料' }
      },
      {
        path: 'modifyPassword',
        component: () => import('@/views/accountSettings/modifyPassword'),
        name: 'modifyPassword',
        meta: { title: '修改密码' }
      }
    ]
  },
  }
]
// 实例化vue的时候只挂载constantRouter
export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
  routes: [...constantRouterMap, ...asynsingle]
})
// 异步挂载的路由
// 动态需要根据权限加载的路由表
//  { path: '*', redirect: '/404', hidden: true }
export const asyncRouterMap = [
  { path: '*', redirect: '/404', hidden: true }
  {
    '0': {
      path: '',
      component: Layout,
      name: 'sysSetting',
      redirect: 'noredirect',
      alwaysShow: true,
      meta: { title: '系统设置' },
      children: [
        {
          path: 'adminUser',
          component: () => import('@/views/sysSetting/adminUser'),
          name: 'adminUser',
          meta: { title: '平台后台用户管理列表' }
        }
      ]
    },
    '1': {
      path: '',
      component: Layout,
      name: 'contentModule',
      redirect: 'noredirect',
      meta: { title: '内容发布' },
      children: [
        {
          path: 'content',
          component: () => import('@/views/contentPub/index'),
          name: 'content',
          redirect: '/content/pubList',
          meta: { title: '内容发布列表' },
          children: [
            {
              path: 'pubList',
              component: () => import('@/views/contentPub/pubList'),
              name: 'pubList',
              meta: { title: '内容发布列表' }
            },
            {
              path: 'publish',
              hidden: true,
              component: () => import('@/views/contentPub/publish'),
              name: 'publish',
              meta: { title: ' 新内容发布' }
            }
          ]
        },
        {
          path: 'recycle',
          component: () => import('@/views/contentPub/index'),
          name: 'recycle',
          redirect: '/recycle/recycleBinList',
          meta: { title: '内容回收站列表' },
          children: [
            {
              path: 'recycleBinList',
              component: () => import('@/views/contentPub/recycleBin'),
              name: 'recycleBinList',
              meta: { title: '内容回收站列表'            meta: { title: '内容回收站列表' }
            },
            {
              path: 'viewRecycling',
              hidden: true,
              component: () => import('@/views/contentPub/viewRecyclingBins'),
              name: 'viewRecycling',
              meta: { title: ' 查看回收内容' }
            }
          ]
        },
        {
          path: 'draftList',
          component: () => import('@/views/contentPub/draftList'),
          name: 'draftList',
          meta: { title: '内容草稿箱列表' }
        }
      ]
    },
    '2': {
      path: '',
      component: Layout,
      name: 'specialExperts',
      redirect: 'noredirect',
      alwaysShow: true,
      meta: { title: '特约专家' },
      children: [
        {
          path: 'expertslist',
          component: () => import('@/views/specialExperts/index'),
          name: 'publishedList',
          meta: { title: '特约专家列表' }
        }
      ]
    },
    '3': {
      path: '',
      component: Layout,
      name: 'cooperationAgency',
      redirect: 'noredirect',
      alwaysShow: true,
      meta: { title: '合作机构' },
      children: [
        {
          path: 'agencylist',
          component: () => import('@/views/cooperationAgency/index'),
          name: 'publishedList',
          meta: { title: '合作机构管理列表' }
        }
      ]
    },
    '4': {
      path: '',
      component: Layout,
      name: 'company',
      redirect: 'noredirect',
      meta: { title: '企业中心' },
      children: [
        {
          path: 'noactive',
          component: () => import('@/views/companyCen/noactive/index'),
          name: 'noactive',
          parentPath: true,
          redirect: { name: 'noactiveList' },
          meta: { title: '未激活企业' },
          children: [
            {
              path: 'noactiveList',
              name: 'noactiveList',
              hidden: true,
              component: () => import('@/views/companyCen/noactive/noactiveList')
            },
            {
              path: 'compHome',
              component: () => import('@/views/companyCen/noactive/compHome'),
              name: 'compHome',
              parentPath: true,
              redirect: { name: 'compInfo' },
              meta: { title: '企业信息' },
              children: [
                {
                  path: 'compInfo',
                  name: 'compInfo',
                  hidden: true,
                  component: () => import('@/views/companyCen/noactive/compInfo')
                },
                {
                  path: 'productHome',
                  component: () => import('@/views/companyCen/noactive/productHome'),
                  name: 'productHome',
                  parentPath: true,
                  redirect: { name: 'compProduct' },
                  children: [
                    {
                      path: 'compProduct',
                      component: () => import('@/views/companyCen/noactive/compProduct'),
                      name: 'compProduct',
                      meta: { title: '企业产品' }
                    },
                    {
                      path: 'productInfo',
                      component: () => import('@/views/companyCen/noactive/productInfo'),
                      name: 'productInfo',
                      hidden: true,
                      meta: { title: '产品详情' }
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          path: 'activeList',
          component: () => import('@/views/companyCen/activeList'),
          name: 'activeList',
          meta: { title: '已激活企业' }
        }
      ]
    },
    '5': {
      path: '',
      component: Layout,
      name: 'platinfo',
      redirect: 'noredirect',
      alwaysShow: true,
      meta: { title: '平台信息' },
      children: [
        {
          path: 'platUpdate',
          component: () => import('@/views/platInfo/platUpdate'),
          name: 'platUpdate',
          meta: { title: '修改平台信息' }
        }
      ]
    },
    '6': {
      path: '',
      component: Layout,
      name: 'userinfo',
      redirect: 'noredirect',
      alwaysShow: true,
      meta: { title: '用户信息' },
      children: [
        {
          path: 'usingList',
          component: () => import('@/views/userInfo/usingList'),
          name: 'usingList',
          meta: { title: '正常用户' }
        },
        {
          path: 'blackList',
          component: () => import('@/views/userInfo/blackList'),
          name: 'blackList',
          meta: { title: '黑名单用户' }
        }
      ]
    },
    '7': {
      path: '',
      component: Layout,
      name: 'demand',
      redirect: 'noredirect',
      meta: { title: '需求中心' },
      children: [
        {
          path: 'publishedList',
          component: () => import('@/views/demandCen/publishedList'),
          name: 'publishedList',
          meta: { title: '发布中需求' }
        },
        {
          path: 'expiredList',
          component: () => import('@/views/demandCen/expiredList'),
          name: 'expiredList',
          meta: { title: '已过期需求' }
        },
        {
          path: 'completedList',
          component: () => import('@/views/demandCen/completedList'),
          name: 'completedList',
          meta: { title: '已完成需求' }
        },
        {
          path: 'closedList',
          component: () => import('@/views/demandCen/closedList'),
          name: 'closedList',
          meta: { title: '已关闭需求' }
        }
      ]
    }
  }
]

src/store/getters.js

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  account: state => state.user.account,
  userid: state => state.user.userid,
  account: state => state.user.account,
  name: state => state.user.name,
  roles: state => state.user.roles,
  logins: state => state.user.logins,
  session: state => state.user.session,
  permission_routers: state => state.permission.routers,
  addRouters: state => state.permission.addRouters
}

src/store/modules/permission.js

import { asyncRouterMap, constantRouterMap } from '@/router'
import { asyncRouterMap, constantRouterMap, asynsingle } from '@/router'
/**
const ret = {
 * 通过meta.role判断是否与当前用户权限匹配
  arr: [],
 * @param roles
  pos(value) {
 * @param route
    return this.arr.indexOf(value)
 */
  },
function hasPermission(roles, route) {
  setArr() {
  if (route.meta.roles) {
    if (this.arr.length < 2) {
    return roles.some(role => route.meta.roles.indexOf(role) >= 0)
      return this.route()
  } else {
    }
    return true
    if (this.pos('0') !== -1) {
  }
      this.arr.splice(this.pos('0'), 1)
}
      this.arr.push('0')
    }
/**
    if (this.pos('7') !== -1) {
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
      this.arr.splice(this.pos('7'), 1)
 * @param asyncRouterMap
      if (this.pos('1') !== -1) {
 * @param roles
        this.arr.splice(0, 1, '1', '7')
 */
      } else {
function filterAsyncRouter(asyncRouterMap, roles) {
        this.arr.unshift('7')
  const accessedRouters = asyncRouterMap.filter(route => {
    if (hasPermission(roles, route)) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, roles)
      }
      return true
    }
    return false
    return this.route()
  })
  },
  return accessedRouters
  route() {
    for (let i = 0; i < this.arr.length; i++) {
      if (asyncRouterMap[0][this.arr[i]]) {
        this.arr[i] = asyncRouterMap[0][this.arr[i]]
      }
    }
    return [...this.arr, ...asynsingle]
  }
}
const permission = {
  state: {
    routers: constantRouterMap,
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
      state.routers = [...constantRouterMap, ...routers]
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        const { roles } = data
        ret.arr = data.sort((par1, par2) => par1 - par2)
        // const roles = ['2']
        const accessedRouters = ret.setArr()
        const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })

src/store/modules/user.js

import { login, logout, getInfo } from '@/api/login'
import { loginUrl, logoutUrl, getInfoUrl } from '@/api/loginnew'
import { getCookiesName, setCookiesName, removeCookiesName } from '@/utils/auth'
import http from '@/utils/request'
import Cookies from 'js-cookie'
const user = {
  state: {
    account: '',
    userid: '',
    name: '',
    roles: [],
    account: ''
    logins: '',
    session: getCookiesName()
  },
  mutations: {
    SET_ACCOUNT: (state, account) => {
      state.account = account
    },
    SET_USERID: (state, userid) => {
      state.userid = userid
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_ROLES: (state, roles) => {
    SET_COUNT: (state, account) => {
      state.roles = roles
      state.account = account
    },
    SET_LOGIN: (state, logins) => {
      state.logins = logins
    },
    SET_SESSION: (state, session) => {
      state.session = session
    }
  },
  actions: {
    // 用户名登录
    LoginByUsername({ commit }, userInfo) {
      const account = userInfo.username.trim()
      const pw = userInfo.password
      const vc = userInfo.imgVerifyCode.toLocaleUpperCase()
      return new Promise((resolve, reject) => {
        login(account, pw, vc).then((response) => {
        http.post(loginUrl, userInfo, (response) => {
          if (response.success) {
            if (response.data) {
              const dataS = response.data
              if (dataS.active) {
              if (dataS.actived) {
                commit('SET_ACCOUNT', dataS.account)
                commit('SET_USERID', dataS.id)
                commit('SET_NAME', dataS.name)
                setCookiesName(dataS.name)
                Cookies.set('userid', dataS.id)
              }
            }
          }
          resolve(response)
        }).catch(error => {
        }, (error) => {
          reject(error)
        })
      })
    // 获取用户信息
    GetUserInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(response => {
        http.get(getInfoUrl, '', response => {
          if (response.success) {
            if (response.data) {
              const dataS = response.data
              if (dataS.active) {
              if (dataS.actived) {
                commit('SET_ACCOUNT', dataS.account)
                commit('SET_USERID', dataS.id)
                // commit('SET_ROLES', ['2'])
                commit('SET_ROLES', [dataS.type.toString()])
                commit('SET_NAME', dataS.name)
                commit('SET_COUNT', dataS.account)
                Cookies.set('userid', dataS.id)
              }
            }
          }
          resolve(response)
        }).catch(error => {
        }, error => {
          reject(error)
        })
      })
    // 登出
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout().then(() => {
        http.get(logoutUrl, '', (response) => {
          commit('SET_ACCOUNT', '')
          commit('SET_USERID', '')
          commit('SET_ROLES', [])
          commit('SET_NAME', '')
          commit('SET_SESSION', '')
          Cookies.remove('userid')
          removeCookiesName()
          resolve(response)
          resolve()
        }, error => {
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 前端 登出
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit('SET_SESSION', '')
        removeCookiesName()
        resolve()
      })
    }
  }
}

src/views/accountSettings/modifyAccountInformation.vue

      <div class="contain-title">修改账户资料</div>
    </div>
    <div class="content-container">
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-row>
        <el-col :span="18">
          <el-col :span="12">
          <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="pass">
            <el-row>
              13526242569
              <el-col :span="12">
               </el-form-item>
                   <el-form-item label="账号" prop="account">
          </el-col>
                  <el-input v-model="ruleForm2.account" placeholder="请填写您的账号" maxlength="20"></el-input>
          <el-col :span="12">
                </el-form-item>
            <el-form-item label="用户名" prop="checkPass">
              </el-col>
              <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off" placeholder="请填写您的用户名"></el-input>
              <el-col :span="12">
               </el-form-item>
                   <el-form-item label="用户名" prop="name">
          </el-col>
                  <el-input v-model="ruleForm2.name" placeholder="请填写您的用户名" maxlength="20"></el-input>
        </el-row>
                </el-form-item>
        <el-row>
              </el-col>
          <el-col :span="12">
            </el-row>
            <el-form-item label="联系电话" prop="age">
            <el-row>
              <el-input v-model.number="ruleForm2.age" placeholder="请填写您的联系电话"></el-input>
              <el-col :span="12">
               </el-form-item>
                   <el-form-item label="联系电话" prop="phone">
          </el-col>
                  <el-input v-model.number="ruleForm2.phone" placeholder="请填写您的联系电话" maxlength="20"></el-input>
          <el-col :span="12">
                </el-form-item>
            <el-form-item label="联系邮箱" prop="mail">
              </el-col>
              <el-input v-model.number="ruleForm2.mail" placeholder="请填写您的联系邮箱"></el-input>
              <el-col :span="12">
               </el-form-item>
                   <el-form-item label="联系邮箱" prop="email">
          </el-col>
                  <el-input v-model="ruleForm2.email" placeholder="请填写您的联系邮箱" maxlength="50"></el-input>
        </el-row>
                </el-form-item>
        <el-row>
              </el-col>
          <el-col :span="12">
            </el-row>
            <el-form-item label="职位" prop="position">
            <el-row>
              <el-input v-model.number="ruleForm2.position" placeholder="请填写您的职位"></el-input>
              <el-col :span="12">
               </el-form-item>
                   <el-form-item label="职位" prop="job">
          </el-col>
                  <el-input v-model="ruleForm2.job" placeholder="请填写您的职位" maxlength="20"></el-input>
          <el-col :span="12">
                </el-form-item>
            <el-form-item label="所在部门" prop="department">
              </el-col>
              <el-input v-model.number="ruleForm2.department" placeholder="请填写您的所在部门"></el-input>
              <el-col :span="12">
               </el-form-item>
                   <el-form-item label="所在部门" prop="dep">
          </el-col>
                  <el-input v-model="ruleForm2.dep" placeholder="请填写您的所在部门" maxlength="20"></el-input>
        </el-row>
                </el-form-item>
        <el-row>
              </el-col>
          <el-form-item label="所在机构" prop="agency">
            </el-row>
            <el-input v-model.number="ruleForm2.agency" placeholder="请填写您的所在机构"></el-input>
            <el-row>
             </el-form-item>
                 <el-form-item label="所在机构" prop="comp">
        </el-row>
                <el-input v-model="ruleForm2.comp" placeholder="请填写您的所在机构" maxlength="50"></el-input>
              </el-form-item>
            </el-row>
        <el-form-item class="modiaB">
            <el-form-item class="modiaB">
          <el-button type="primary" @click="submitForm('ruleForm2')">保存修改</el-button>
              <el-button type="primary" @click="submitForm('ruleForm2')">保存修改</el-button>
        </el-form-item>
            </el-form-item>
      </el-form>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import { url, modifyUrl } from '@/api/modifyAccountInformation'
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
      var checkPhone = (rule, value, callback) => {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (!value) {
          return callback(new Error('年龄不能为空'))
          return callback(new Error('请填写联系电话'))
        }
        } else if (!reg.test(value)) {
        setTimeout(() => {
          callback(new Error('联系电话格式有误，请检查后重新填写'))
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'))
            } else {
              callback()
            }
          }
        }, 1000)
      }
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        ruleForm2: {
          pass: '',
          account: '',
          checkPass: '',
          name: '',
          age: '',
          phone: '',
          mail: '',
          email: '',
          position: '',
          job: '',
          department: '',
          dep: '',
          agency: ''
          comp: ''
        },
        rules2: {
          pass: [
          account: [
            { validator: validatePass, trigger: 'blur' }
            { message: '请填写账号', required: true }
          ],
          checkPass: [
          name: [
            { validator: validatePass2, trigger: 'blur', required: true }
            { message: '请填写用户名', required: true }
          ],
          age: [
          phone: [
            { validator: checkAge, trigger: 'blur', required: true }
            { validator: checkPhone, trigger: 'blur', required: true }
          ],
          position: [
          email: [
            { required: true }
            { type: 'email', message: '联系邮箱格式有误，请检查后重新填写', trigger: 'blur' }
          ],
          department: [
          job: [
            { required: true }
            { message: '请填写职位', required: true }
          ],
          agency: [
          dep: [
            { required: true }
            { message: '请填写所在部门', required: true }
          ],
          comp: [
            { message: '请填写所在机构', required: true }
          ]
        }
      }
    },
    created() {
      this.$http.get(url, '', (response) => {
        if (response.success && response.data) {
          this.ruleForm2 = {
            account: response.data.account,
            name: response.data.name,
            phone: response.data.phone,
            email: response.data.email || '',
            job: response.data.job,
            dep: response.data.dep,
            comp: response.data.comp
          }
        }
      })
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
            this.$http.put(modifyUrl, this.ruleForm2, (response) => {
              if (response.success) {
                this.$message({
                  message: '资料修改成功',
                  type: 'success'
                })
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>
<style scoped>
  .demo-ruleForm {
    width: 900px;
  }
  .modiaB {
    text-align: center;
    margin: 170px 0;
    margin: 100px 0;
  }
</style>

src/views/accountSettings/modifyPassword.vue

      <div class="contain-title">重置密码</div>
    </div>
    <div class="content-container">
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-form-item label="新的密码" prop="pass">
        <el-col :span="14">
          <el-input type="password" v-model="ruleForm2.pass" autocomplete="off" placeholder="请填写新的密码"></el-input>
          <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
           </el-form-item>
               <el-form-item label="新的密码" prop="pass">
        <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm2.pass" placeholder="请填写新的密码"></el-input>
          <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off" placeholder="再次输入新的密码"></el-input>
            </el-form-item>
           </el-form-item>
               <el-form-item label="确认密码" prop="checkPass">
        <el-form-item class="modiaB">
              <el-input type="password" v-model="ruleForm2.checkPass" placeholder="再次输入新的密码"></el-input>
          <el-button type="primary" @click="submitForm('ruleForm2')">确定</el-button>
            </el-form-item>
           </el-form-item>
               <el-form-item class="modiaB">
      </el-form>
              <el-button type="primary" @click="submitForm('ruleForm2')">确定</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import url from '@/api/modifyPassword'
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'))
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'))
            } else {
              callback()
            }
          }
        }, 1000)
      }
      var validatePass = (rule, value, callback) => {
        const reg = /^[a-zA-Z0-9]{6,24}$/
        if (value === '') {
          callback(new Error('请输入密码'))
          callback(new Error('请设置您的新密码'))
        } else if (!reg.test(value)) {
          callback(new Error('密码由6-24位数字和字母组成，区分大小写'))
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        const reg = /^[a-zA-Z0-9]{6,24}$/
        if (value === '') {
          callback(new Error('请再次输入密码'))
          callback(new Error('请再次输入密码确认'))
        } else if (value !== this.ruleForm2.pass) {
        } else if (!reg.test(value)) {
          callback(new Error('两次输入密码不一致!'))
          callback(new Error('密码由6-24位数字和字母组成，区分大小写'))
        } else if (value !== this.ruleForm2.pass && value) {
          callback(new Error('两次输入不一致，请重新输入'))
        } else {
          callback()
        }
      return {
        ruleForm2: {
          pass: '',
          checkPass: '',
          checkPass: ''
          age: ''
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
            { validator: validatePass, trigger: 'blur', required: true }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
            { validator: validatePass2, trigger: 'blur', required: true }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      }
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
            this.$http.post(url, { npw: this.ruleForm2.pass }, (response) => {
              if (response.success) {
                this.$confirm('密码已修改，快去登录吧！', '修改密码', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  center: true,
                  showCancelButton: false,
                  showClose: false,
                  closeOnClickModal: false,
                  type: 'success'
                }).then(() => {
                  this.$store.dispatch('LogOut').then((response) => {
                    if (response.success) {
                      this.$router.push('/login')
                    }
                  })
                })
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>
<style scoped>
  .demo-ruleForm {
    width: 900px;
  }
  .modiaB {
    text-align: center;
    margin: 100px 0;

src/views/contentPub/publish.vue

</template>
<script>
  import searchTemplate from './searchTemplate'
  import searchTemplate from '@/components/searchBar'
  import uploadFile from './uploadFile'
  import uploadFile from '@/components/uploadFile'
  import UE from './editorUE'
  import UE from '@/components/editorUE'
  export default {
    data() {
      var checkTitle = (rule, value, callback) => {

src/views/layout/components/Sidebar/index.vue

      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <sidebar-item v-for="route in routes" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
      <sidebar-item v-for="route in permission_routers" :key="permission_routers.name" :item="route" :base-path="route.path"></sidebar-item>
    </el-menu>
  </el-scrollbar>
</template>
export default {
  components: { SidebarItem },
  computed: {
  computed: mapGetters(['permission_routers'])
    routes() {
      return this.$router.options.routes
    }
  }
}
</script>

src/views/layout/components/TopNavbar.vue

<script>
import { mapGetters } from 'vuex'
import { MessageBox } from 'element-ui'
import Cookies from 'js-cookie'
import '@/styles/variables.scss'
export default {
  data() {
    return {
      bridgeId: '',
      showName: '',
      dataList: ''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'name'
      'roles'
    ])
  },
  watch: {
    '$route'(to, from) {
      if (to.path === '/dashboard') {
        var dataList = this.dataList
        for (let i = 0; i < dataList.length; i++) {
          dataList[i].disab = false
        }
        Cookies.remove('bridgeId')
        Cookies.remove('bridgeName')
        this.showName = ''
      } else {
        this.bridgeId = Cookies.get('bridgeId')
        this.showName = Cookies.get('bridgeName')
      }
    }
  },
  created() {
    this.bridgeId = Cookies.get('bridgeId')
    this.showName = Cookies.get('bridgeName')
  },
  methods: {
    toHome() {
      this.$router.replace({ path: '/' })
    },
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    logout() {
      MessageBox.confirm('您确认要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        center: true
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          Cookies.remove('bridgeId')
          Cookies.remove('bridgeName')
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      }).catch(() => {
        console.log('已取消退出')
      })
    },
    goToDashboardC(id, name) {
      this.showName = name
      Cookies.set('bridgeId', id)
      Cookies.set('bridgeName', name)
      this.$router.replace({
        name: 'bridgeDetail',
        query: { id: id, name: name }
      })
    }
  }
}

src/views/login/index.vue

    </div>
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
      <h3 class="title">登录</h3>
      <el-form-item prop="username">
      <el-form-item prop="account">
        <span class="svg-container svg-container_login">
          <svg-icon icon-class="user" />
        </span>
        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入您的手机号码" maxlength="11" />
        <el-input name="username" type="text" v-model="loginForm.account" autoComplete="on" placeholder="请输入用户账号"
          maxlength="11" />
      </el-form-item>
      <el-form-item prop="password">
      <el-form-item prop="pw">
        <span class="svg-container">
          <svg-icon icon-class="password"/>
          <svg-icon icon-class="password" />
        </span>
        <el-input name="password" :type="pwdType" v-model="loginForm.password" autoComplete="on"
        <el-input name="password" :type="pwdType" v-model="loginForm.pw" autoComplete="on" placeholder="请输入登录密码"
          placeholder="请输入您的登录密码" maxlength="24"></el-input>
          maxlength="24"></el-input>
          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" v-show="!falg"/><svg-icon icon-class="password-view" v-show="falg"/></span>
        <span class="show-pwd" @click="showPwd">
      </el-form-item>
          <svg-icon icon-class="eye" v-show="!falg" />
      <el-form-item prop="imgVerifyCode">
          <svg-icon icon-class="password-view" v-show="falg" /></span>
        <span class="svg-container">
          <svg-icon icon-class="msgvc"></svg-icon>
        </span>
        <el-input v-model="loginForm.imgVerifyCode" placeholder="请输入图形验证码" @keyup.enter.native="handleLogin" class="code-btn" maxlength="4">
        <img slot="append" :src="imgVcUrl" @click="changeImgVc" /></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="log-btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
      </el-form-item>
      <el-form-item class="el-form-find">
        <el-button type="text" @click.native.prevent="goBackPwd">忘记密码？</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { Message } from 'element-ui'
  import { Message } from 'element-ui'
import { getPictureVC } from '@/api/pictureVc'
  import '@/styles/loginform.scss'
import '@/styles/loginform.scss'
  export default {
    name: 'login',
export default {
    data() {
  name: 'login',
      var validPassword = (rule, value, callback) => {
  data() {
        const reg = /^[a-zA-Z0-9]{6,24}$/
    var validPhone = (rule, value, callback) => {
        if (!value) {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          callback(new Error('请输入您的登录密码'))
      if (!value) {
        }
        callback(new Error('请输入您的手机号码'))
        if (!reg.test(value)) {
      } else if (!reg.test(value)) {
          callback(new Error('密码由6-24个数字和字母组成，区分大小写'))
        callback(new Error('请输入正确的手机号码'))
        }
      } else {
        callback()
      }
    }
      return {
    return {
        falg: false,
      falg: false,
        loginForm: {
      imgVcUrl: '',
          account: '',
      loginForm: {
          pw: ''
        username: 'admin',
        },
        password: 'admin',
        loginRules: {
        imgVerifyCode: ''
          account: [{ required: true, message: '请输入您的用户账号' }],
      },
          pw: [
      loginRules: {
            { required: true, validator: validPassword, trigger: 'blur' }
        // username: [{ required: true, trigger: 'blur', validator: validPhone }],
          ]
        // password: [
        },
        //   { required: true, message: '请输入您的登录密码', trigger: 'blur' },
        loading: false,
        //   { min: 6, max: 24, message: '密码由6-24个字符组成，区分大小写', trigger: 'blur' }
        pwdType: 'password'
        // ],
        // imgVerifyCode: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }]
      },
      loading: false,
      pwdType: 'password'
    }
  },
  created() {
    this.changeImgVc()
  },
  methods: {
    showPwd() {
      this.falg = !this.falg
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
    methods: {
      this.$router.push({ path: '/dashboard' })
      showPwd() {
      // this.$refs.loginForm.validate(valid => {
        this.falg = !this.falg
      //   if (valid) {
        if (this.pwdType === 'password') {
      //     this.loading = true
          this.pwdType = ''
      //     this.$store.dispatch('LoginByUsername', this.loginForm).then((response) => {
        } else {
      //       this.loading = false
          this.pwdType = 'password'
      //       if (response.success) {
        }
      //         if (response.data) {
      },
      //           this.$store.dispatch('GetUserInfo').then(res => {
      handleLogin() {
      //           })
        this.$refs.loginForm.validate(valid => {
      //           this.$router.push({ path: '/dashboard' })
          if (valid) {
      //         } else {
            this.loading = true
      //           Message.error('登录账号与密码不匹配，请检查后重试')
            this.$store.dispatch('LoginByUsername', this.loginForm).then((response) => {
      //           this.changeImgVc()
              this.loading = false
      //           return
              if (response.success) {
      //         }
                if (response.data) {
      //       } else {
                  this.$store.dispatch('GetUserInfo').then(res => {
      //         const errorCode = [{
                  })
      //           code: -60001,
                  this.$router.push({ path: '/dashboard' })
      //           msg: '图形验证码不存在'
                } else {
      //         }, {
                  Message.error('该账号已停用，请联系管理员')
      //           code: -60002,
                }
      //           msg: '图形验证码超时'
              } else {
      //         }, {
                if (response.code === -200001) {
      //           code: -60003,
                  Message.error('账号或密码错误，请重新输入')
      //           msg: '图形验证码不正确'
                }
      //         }, {
              }
      //           code: -60005,
            }).catch(() => {
      //           msg: '该账号已停用，请联系管理员'
              this.loading = false
      //         }]
            })
      //         for (let i = 0; i < errorCode.length; i++) {
          } else {
      //           if (response.code === errorCode[i].code) {
            console.log('error submit!!')
      //             Message.error(errorCode[i].msg)
            return false
      //             this.changeImgVc()
          }
      //             return
        })
      //           }
      }
      //         }
      //       }
      //     }).catch(() => {
      //       this.loading = false
      //     })
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    goBackPwd() {
      this.$router.push({ path: '/findPwd' })
    },
    changeImgVc() {
      this.imgVcUrl = getPictureVC('PIC_LOGIN')
    }
  }
}
</script>
</script>