登录，找回密码

build/webpack.dev.conf.js

      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'vue-element-admin'
    }),
      favicon: resolve('favicon.ico')
    })
  ]
})

build/webpack.prod.conf.js

      template: 'index.html',
      inject: true,
      favicon: resolve('favicon.ico'),
      title: 'vue-element-admin',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
      children: true,
      minChunks: 3
    }),
    // split echarts into its own file
    new webpack.optimize.CommonsChunkPlugin({
      async: 'echarts',
      minChunks(module) {
        var context = module.context;
        return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
      }
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {

config/index.js

     * then assetsPublicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     */
    assetsPublicPath: '/vueAdmin-template/', // If you are deployed on the root path, please use '/'
    assetsPublicPath: '/', // If you are deployed on the root path, please use '/'
    /**
     * Source Maps
     */
    productionSourceMap: false,
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

config/prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
  NODE_ENV: '"production"'
}

src/api/article.js

import request from '@/utils/request'
export function fetchList(query) {
  return request({
    url: '/article/list',
    method: 'get',
    params: query
  })
}
export function fetchArticle(id) {
  return request({
    url: '/article/detail',
    method: 'get',
    params: { id }
  })
}
export function fetchPv(pv) {
  return request({
    url: '/article/pv',
    method: 'get',
    params: { pv }
  })
}
export function createArticle(data) {
  return request({
    url: '/article/create',
    method: 'post',
    data
  })
}
export function updateArticle(data) {
  return request({
    url: '/article/update',
    method: 'post',
    data
  })
}

src/api/login.js

import request from '@/utils/request'
export function login(username, password) {
export function login(account, pw, vc) {
  return request({
    url: '/user/login',
    url: '/ajax/sys/login',
    method: 'post',
    data: {
      username,
      password
      account,
      pw,
      vc
    }
  })
}
export function getInfo(token) {
export function getInfo(params) {
  return request({
    url: '/user/info',
    url: '/ajax/sys/user',
    method: 'get',
    params: { token }
    params
  })
}
export function logout() {
  // return request({
  //   url: '/user/logout',
  //   method: 'post'
  // })
}
export function isReg(params) {
  return request({
    url: '/ajax/sys/check',
    method: 'get',
    params
  })
}
export function getMsgPhone(params) {
  return request({
    url: '/user/logout',
    method: 'post'
    url: '/ajax/sys/resetPwMobile',
    method: 'get',
    params
  })
}

src/api/pictureVc.js

import { comUrl } from '@/utils/index'
export function getPictureVC(flag) {
  return comUrl + '/ajax/PictureVC?' + new Date().getTime() + '&flag=' + flag
}

src/main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import '@/styles/index.scss' // global css
import '@/icons' // icon
import '@/permission' // permission control
Vue.use(ElementUI, { locale })
Vue.use(ElementUI)
Vue.config.productionTip = false

src/permission.js

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' // 验权
// 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' // 验权
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('GetInfo').then(res => { // 拉取用户信息
          next()
        }).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()
    }
  }
})
// NProgress.configure({ showSpinner: false })// NProgress Configuration
router.afterEach(() => {
  NProgress.done() // 结束Progress
})
// 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()
//     }
//   }
// })
// router.afterEach(() => {
//   NProgress.done() // 结束Progress
// })

src/router/index.js

/* Layout */
import Layout from '../views/layout/Layout'
import LayoutC from '../views/layout/LayoutC'
// import LayoutC from '../views/layout/LayoutC'
/** note: submenu only apppear when children.length>=1
*   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
**/
/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
* redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
* name:'router-name'             the name is used by <keep-alive> (must set!!!)
* meta : {
    roles: ['admin','editor']     will control the page roles (you can set multiple roles)
    title: 'title'               the name show in submenu and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar,
    noCache: true                if true ,the page will no be cached(default is false)
  }
**/
// 所有权限通用路由表
// 如首页和登录页和一些不用权限的公用页面
export const constantRouterMap = [
  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
  { path: '/findPwd', component: () => import('@/views/findPwd/index'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true },
  {
    path: '/bridgesConsole',
    component: LayoutC,
    redirect: '/bridgesConsole/birdgeLists',
    hidden: true,
    children: [
      {
        path: 'birdgeLists',
        name: 'bridgeLists',
        component: () => import('@/views/bridgesConsole/birdgeLists/index')
      },
      {
        path: 'dashboardC',
        name: 'dashboardC',
        component: () => import('@/views/bridgesConsole/dashboardC/index')
      }
    ]
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',
      component: () => import('@/views/dashboard/index')
      component: () => import('@/views/dashboard/index'),
      name: 'dashboard',
      meta: { title: '主页', noCache: true }
    }]
     meta: { title: '主页', noCache: true },
  }
]
// 实例化vue的时候只挂载constantRouter
export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})
// 异步挂载的路由
// 动态需要根据权限加载的路由表
export const asyncRouterMap = [
  {
    path: '/peoplesManage',
    component: Layout,
    redirect: '/peoplesManage/infoManage',
    redirect: '/peoplesManage/infoManage/index',
    name: 'peoplesManage',
    meta: { title: '用户系统管理', icon: 'peoples' },
    meta: {
      title: '用户系统管理',
      icon: 'peoples',
      roles: ['admin']
    },
    alwaysShow: true,
    children: [
      {
  {
    path: '/baseInfoManage',
    component: Layout,
    redirect: '/baseInfoManage/bridgesInfo',
    redirect: '/baseInfoManage/bridgesInfo/index',
    name: 'BaseInfoManage',
    meta: { title: '基础信息管理', icon: 'list' },
    meta: {
      title: '基础信息管理',
      icon: 'list',
      roles: ['admin']
    },
    children: [
      {
        path: 'bridgesInfo',
    ]
  },
  {
    path: '/bridgesConsole',
    component: Layout,
    redirect: '/bridgesConsole/bridgeDetail',
    meta: {
      roles: ['other']
    },
    children: [
      {
        path: 'bridgeDetail',
        name: 'bridgeDetail',
        component: () => import('@/views/bridgesConsole/bridgeDetail/index')
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]
export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

src/store/getters.js

  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  roles: state => state.user.roles
  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
}
export default getters

src/store/index.js

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'
const store = new Vuex.Store({
  modules: {
    app,
    errorLog,
    permission,
    user
  },
  getters

src/store/modules/errorLog.js

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

import { asyncRouterMap, constantRouterMap } from '@/router'
/**
 * 通过meta.role判断是否与当前用户权限匹配
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.indexOf(role) >= 0)
  } else {
    return true
  }
}
/**
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
 * @param asyncRouterMap
 * @param roles
 */
function filterAsyncRouter(asyncRouterMap, roles) {
  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 accessedRouters
}
const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        const { roles } = data
        let accessedRouters
        if (roles.indexOf('admin') >= 0) {
          accessedRouters = asyncRouterMap
        } else {
          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
        }
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    }
  }
}
export default permission

src/store/modules/user.js

const user = {
  state: {
    user: '',
    status: '',
    code: '',
    token: getToken(),
    name: '',
    avatar: '',
  },
  mutations: {
    SET_CODE: (state, code) => {
      state.code = code
    },
    SET_STATUS: (state, status) => {
      state.status = status
    },
    SET_TOKEN: (state, token) => {
      state.token = token
    },
  },
  actions: {
    // 登录
    Login({ commit }, userInfo) {
    // 用户名登录
    LoginByUsername({ commit }, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        login(username, userInfo.password).then(response => {
          const data = response.data
          setToken(data.token)
          commit('SET_TOKEN', data.token)
        login(username, userInfo.password, vc).then(response => {
          // const data = response.data
          // commit('SET_TOKEN', data.token)
          setToken(response.data.token)
          resolve()
        }).catch(error => {
          reject(error)
    },
    // 获取用户信息
    GetInfo({ commit, state }) {
    GetUserInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo(state.token).then(response => {
          const data = response.data
          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
            commit('SET_ROLES', data.roles)
          } else {
            reject('getInfo: roles must be a non-null array !')
        getInfo().then(response => {
          if (response.success) {
            console.log(response)
          }
          commit('SET_NAME', data.name)
          commit('SET_AVATAR', data.avatar)
          // 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)

src/styles/loginform.scss

$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
$light_black:#555;
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .logo-wrapper {
    display:block;
    position:absolute;
    top:30px;
    left:30px;
    height:30px;
    width:320px;
    background-image: url('/static/touchwave.png');
    background-size: 320px 30px;
  }
  .form-wrapper{
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    .form-contain {
      width:420px;
      padding:30px 20px;
      .form-title {
        font-size: 22px;
        line-height: 36px;
        color:$light_gray;
        text-align:center;
        margin-bottom:40px;
      }
      .el-button--primary{
        width:100%;
      }
    }
  }
  .step-wrapper{
    margin-bottom:30px;
    .el-step__head.is-process{
      color: $light_black;
      border-color: $light_gray;
    }
    .el-step__title.is-process{
      color: $light_gray;
    }
    .el-step__description.is-process{
      color: $light_gray;
    }
    .el-step__icon{
      width:40px;
      height:40px;
      .el-step__icon-inner{
        font-size:16px;
      }
    }
  }
  .step-contain{
    .importTip{
      font-size: 18px;
      margin: 10px 0;
    }
    .mainTip{
      color:$light_gray;
    }
    .smallTip{
      color:$light_gray;
      line-height:16px;
      font-size:13px;
    }
  }
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    padding: 50px 35px 15px 35px;
    margin: 120px auto;
  }
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
  .el-form-find {
    border: none;
    background: none;
    margin-top: -20px;
  }
  .code-btn{
    width: 92%;
    .el-input-group__append{
      padding: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      width: 140px;
      img{
        width: 140px;
        height:42px;
        cursor: pointer;
      }
      .el-button{
        width: 100%;
        margin:0;
        padding:15px 20px;
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    &_login {
      font-size: 20px;
    }
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    color: $light_gray;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}

src/utils/index.js

/**
 * Created by jiachenpan on 16/11/18.
 */
export const comUrl = 'http://localhost:90'
export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
  }
}
export function param2Obj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

src/utils/permission.js

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/utils/request.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
import qs from 'qs'
import { comUrl } from '@/utils/index'
// import { Message } from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
  baseURL: comUrl // api的base_url
  // timeout: 5000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  // 配置config
  config.headers.Accept = 'application/json'
  if (config.method === 'post') {
    // if (config.url !== http.sample.list && config.url !== http.manage.kit.save) {
    config.data = qs.stringify(config.data)
    // 处理后后台无需添加RequestBody
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded charset=UTF-8'
    // }
  }
  // if (store.getters.token) {
  //   config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  // }
  return config
}, error => {
  // Do something with request error
})
// respone拦截器
service.interceptors.response.use(
  response => {
  /**
  * code为非20000是抛错 可结合自己业务进行修改
  */
    const res = response.data
    if (res.code !== 20000) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })
service.interceptors.response.use(response => {
  // response => {
  // /**
  // * code为非20000是抛错 可结合自己业务进行修改
  // */
  //   const res = response.data
  //   if (res.code !== 20000) {
  //     Message({
  //       message: res.message,
  //       type: 'error',
  //       duration: 5 * 1000
  //     })
      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload()// 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject('error')
  //     // 50008:非法的token 50012:其他客户端登录了  50014:Token 过期了
  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //       MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
  //         confirmButtonText: '重新登录',
  //         cancelButtonText: '取消',
  //         type: 'warning'
  //       }).then(() => {
  //         store.dispatch('FedLogOut').then(() => {
  //           location.reload()// 为了重新实例化vue-router对象 避免bug
  //         })
  //       })
  //     }
  //     return Promise.reject('error')
  //   } else {
  //     return response.data
  //   }
  // },
  let data = response.data
  const status = response.status
  if (status === 200) {
    if (response.data === undefined) {
      // 解决IE9数据问题
      data = response.request.responseText
    } else {
      return response.data
      data = response.data
    }
  },
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
    if (!(data instanceof Object)) {
      // 判断data不是Object时，解析成Object
      // data = JSON.parse(data)
    }
    return data
  } else {
    // 业务异常
    console.log(response)
    return Promise.resolve(response)
  }
)
}, error => {
  // 系统异常(后期统一处理)
  console.log(error)
  return Promise.reject(error)
})
export default service
export default {
  service,
  comUrl
}

src/views/dashboard/admin/index.vue

<template>
  <div class="dashboard-editor-container">
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
  超级管理员，欢迎您
   <!--  <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"></line-chart>
    </el-row>
    </el-row> -->
   <!--  <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">

src/views/dashboard/index.vue

    ])
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'otherDashboard'
    }
    // if (this.roles !== 1) {
    //   this.currentRole = 'otherDashboard'
    // }
  }
}
</script>

src/views/dashboard/other/index.vue

<template>
  <div class="dashboard-editor-container">
    <div class=" clearfix">
      <pan-thumb style="float: left" :image="avatar"> Your roles:
        <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
      </pan-thumb>
      <div class="info-container">
        <span class="display_name">{{name}}</span>
        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
      </div>
    </div>
    <div>
      <img class="emptyGif" :src="emptyGif">
    <el-row class="panel-group" :gutter="40">
      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col" v-for="item in [0,1,2,3,4]" :key="item.id" @click.native="goToDashboardC">
        <div class='card-panel'>
          <div class="card-panel-icon-wrapper">
            <div class="card-image" style="background-image: url(/static/touchwave.png);"></div>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">桥梁名称 <span>山东青岛跨海大桥A段</span></div>
            <div class="card-panel-text">未读报警 10条</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="4"
        layout="prev, pager, next, jumper"
        :total="10">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
export default {
  name: 'dashboard-editor',
  components: { PanThumb },
  data() {
    return {
      emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
      currentPage: 1
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  components: {
  },
  methods: {
    goToDashboardC() {
      this.$router.push({ path: '/bridgesConsole' })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .emptyGif {
    display: block;
    width: 45%;
    margin: 0 auto;
  }
  .dashboard-editor-container {
    background-color: #e3e3e3;
    min-height: 100vh;
    padding: 50px 60px 0px;
    .pan-info-roles {
      font-size: 12px;
      font-weight: 700;
      color: #333;
      display: block;
.dashboard-editor-container{
  padding: 32px;
  .panel-group {
    margin-top: 18px;
    .card-panel-col{
      margin-bottom: 32px;
    }
    .info-container {
    .card-panel {
      cursor: pointer;
      padding: 15px;
      font-size: 12px;
      position: relative;
      margin-left: 190px;
      height: 150px;
      line-height: 200px;
      .display_name {
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
      }
      .card-panel-icon-wrapper {
        margin: 10px 0;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-image{
        width: 100%;
        max-width: 280px;
        margin: auto;
        height: 160px;
        border: 1px solid #d0d0d0;
        background-position: center;
        background-size: cover;
      }
      .card-panel-icon {
        font-size: 48px;
        line-height: 48px;
        color: #212121;
        position: absolute;
        top: 25px;
      }
      .card-panel-description {
        font-weight: bold;
        margin-top:12px;
        .card-panel-text {
          line-height: 24px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }
}
</style>

src/views/findPwd/index.vue

<template>
  <div class="login-container">
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
      <h3 class="title">vue-element-admin</h3>
      <el-form-item prop="username">
        <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="username" />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password"></svg-icon>
        </span>
        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
          placeholder="password"></el-input>
          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
          Sign in
        </el-button>
      </el-form-item>
      <div class="tips">
        <span style="margin-right:20px;">username: admin</span>
        <span> password: admin</span>
    <div class="logo-wrapper"></div>
    <div class="form-wrapper">
      <div class="form-contain">
        <p class="form-title">找回密码</p>
        <div class="step-wrapper">
          <el-steps :active="stepVal" finish-status="success" align-center>
            <el-step title="输入手机号"></el-step>
            <el-step title="重置密码"></el-step>
          </el-steps>
        </div>
        <div class="step-contain">
          <el-form v-show="stepFisrt" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item prop="phoneNum">
              <el-input v-model="ruleForm.phoneNum" placeholder="请输入您的手机号码"></el-input>
            </el-form-item>
            <el-form-item prop="msgVC">
              <el-input v-model="ruleForm.msgVC" placeholder="请输入短信验证码" class="code-btn" style="width:100%">
                <el-button slot="append" :disabled="phoneCodeBol" @click="clickMsgVcLogin">
                  <span v-if="sendMsgDisabled">{{seconds + '秒后获取'}}</span>
                  <span v-if="!sendMsgDisabled">获取验证码</span>
                </el-button>
             </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="isDisabl" @click="nextStep('ruleForm')">下一步</el-button>
            </el-form-item>
            <el-form-item class="el-form-find">
              <el-button type="text" @click="goLogin">又想起来了</el-button>
            </el-form-item>
          </el-form>
          <el-form v-show="stepThird" :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
            <el-form-item prop="pass">
              <el-input type="password" v-model="ruleForm2.pass" placeholder="请设置您的新密码" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
              <el-input type="password" v-model="ruleForm2.checkPass" placeholder="请再次输入密码确认" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="isDisabl" @click="resetPwd('ruleForm2')">重置密码</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-form>
    </div>
  </div>
</template>
<script>
import { isvalidUsername } from '@/utils/validate'
  import { isReg, getMsgPhone } from '@/api/login'
  import '@/styles/loginform.scss'
export default {
  name: 'login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
  export default {
    data() {
      var validPhone = (rule, value, callback) => {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (!value) {
          callback(new Error('请输入你的手机号码'))
        } else if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请设置您的新密码'))
        } else if (value.length < 6 || value.length > 24) {
          callback(new Error('密码由6-24个字符组成，区分大小写'))
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass')
          }
          callback()
        }
      }
    }
    return {
      loginForm: {
        username: 'admin',
        password: 'admin'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      loading: false,
      pwdType: 'password'
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码确认'))
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致，请重新输入!'))
        } else {
          callback()
        }
      }
      return {
        phoneCodeBol: false,
        sendMsgDisabled: false,
        seconds: 60,
        platId: '',
        resetStepNum: '',
        resetCode: '',
        stepVal: 0,
        stepFisrt: true,
        stepThird: false,
        isDisabl: false,
        ruleForm: {
          phoneNum: '',
          msgVC: ''
        },
        rules: {
          phoneNum: [
            { required: true, validator: validPhone, trigger: 'blur' }
          ],
          msgVC: [
            { required: true, message: '请输入短信验证码', trigger: 'blur' }
          ]
        },
        ruleForm2: {
          pass: '',
          checkPass: ''
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      // this.platId = Cookies.get('platId')
      // this.resetStepNum = util.urlParse('step')
      // this.resetCode = util.urlParse('sc')
      if (this.resetStepNum === '2') {
        this.stepFisrt = false
        this.stepThird = true
        this.stepVal = 2
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
          }).catch(() => {
            this.loading = false
    methods: {
      nextStep(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // this.$axios.post(httpUrl.hQuery.sign.reqResetPw, {
            //   id: this.platId,
            //   mail: this.ruleForm.mail,
            //   url: httpUrl.platUrl + '/#/findPwd?step=2&sc'
            // }).then(res => {
            //   console.log(res)
            //   if (res.success) {
            //     this.stepFisrt = false
            //     this.stepVal = 1
            //   } else {
            //     let errorCode = [{
            //       code: -600001,
            //       msg: '用户不存在'
            //     }, {
            //       code: -600002,
            //       msg: '发送邮箱错误'
            //     }]
            //     for (let i = 0 i < errorCode.length i++) {
            //       if (res.code === errorCode[i].code) {
            //         this.$message.error(errorCode[i].msg)
            //         return
            //       }
            //     }
            //   }
            // })
          } else {
            return false
          }
        })
      },
      userRegisterOk() {
        isReg(this.ruleForm.phoneNum).then(res => {
          if (res.success) {
            if (res.data === true) {
              this.$message({
                message: '该账号不存在，请检查后重试',
                type: 'warning'
              })
            }
          }
        })
      },
      getPhoneLogin() {
        getMsgPhone(this.ruleForm.phoneNum, true).then((res) => {
          if (res.success) {
            this.phoneResBackLogin = res.data
          }
        })
      },
      clickMsgVcLogin() {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (!this.ruleForm.phoneNum) {
          this.$message({
            message: '请输入你的手机号码',
            type: 'warning'
          })
        } else if (!reg.test(this.ruleForm.phoneNum)) {
          this.$message({
            message: '请输入正确的手机号码',
            type: 'warning'
          })
        } else {
          console.log('error submit!!')
          return false
          this.userRegisterOk()
          const me = this
          me.sendMsgDisabled = true
          me.phoneCodeBol = true
          const interval = window.setInterval(function() {
            if ((me.seconds--) <= 0) {
              me.seconds = 60
              me.sendMsgDisabled = false
              me.phoneCodeBol = false
              window.clearInterval(interval)
            }
          }, 1000)
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$light_gray:#eee;
/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      },
      resetPwd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // this.$axios.post(httpUrl.hQuery.sign.resetpw, {
            //   code: this.resetCode,
            //   pw: this.ruleForm2.pass
            // }).then(res => {
            //   console.log(res)
            //   if (res.success) {
            //     this.$alert('您可以使用新密码登录您的账户了', '恭喜您，您的密码重置成功！', {
            //       confirmButtonText: '重新登录',
            //       type: 'success',
            //       center: true,
            //       callback: action => {
            //         if (action === 'confirm') {
            //           this.$router.push({path: '/loginPlat'})
            //         }
            //       }
            //     })
            //   } else {
            //     if (res.code === -600001) {
            //       this.$alert('小提示：邮件内的链接有效时长为10分钟', '很抱歉，当前的链接已失效。', {
            //         confirmButtonText: '重新找回密码',
            //         type: 'warning',
            //         center: true,
            //         callback: action => {
            //           if (action === 'confirm') {
            //             this.stepFisrt = true
            //             this.stepThird = false
            //             this.stepVal = 0
            //           }
            //         }
            //       })
            //       return
            //     }
            //   }
            // })
          } else {
            return false
          }
        })
      },
      goLogin() {
        this.$router.push({ path: '/login' })
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    &_login {
      font-size: 20px;
    }
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    color: $light_gray;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
</script>

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="route.name" :item="route" :base-path="route.path"></sidebar-item>
    </el-menu>
  </el-scrollbar>
</template>
  components: { SidebarItem },
  computed: {
    ...mapGetters([
      'permission_routers',
      'sidebar'
    ]),
    routes() {

src/views/login/authredirect.vue

<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

<template>
  <div class="login-container">
    <div class="logo-wrapper"></div>
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
      <h3 class="title">vue-element-admin</h3>
      <h3 class="title">登录</h3>
      <el-form-item prop="username">
        <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="username" />
        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password"></svg-icon>
        </span>
        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
          placeholder="password"></el-input>
          placeholder="请输入登录密码"></el-input>
          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
      </el-form-item>
      <el-form-item prop="imgVerifyCode">
        <span class="svg-container">
          <svg-icon icon-class="password"></svg-icon>
        </span>
        <el-input v-model="loginForm.imgVerifyCode" placeholder="请输入图形验证码" class="code-btn">
        <img slot="append" :src="imgVcUrl" @click="changeImgVc" /></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
          Sign in
        </el-button>
        <el-button type="primary" style="width:100%;" :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>
      <div class="tips">
        <span style="margin-right:20px;">username: admin</span>
        <span> password: admin</span>
      </div>
    </el-form>
  </div>
</template>
<script>
import { isvalidUsername } from '@/utils/validate'
// import { isvalidUsername } from '@/utils/validate'
import { getPictureVC } from '@/api/pictureVc'
import '@/styles/loginform.scss'
export default {
  name: 'login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
    var validPhone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (!value) {
        callback(new Error('请输入你的手机号码'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      imgVerifyCode: '',
      imgVcUrl: '',
      loginForm: {
        username: 'admin',
        password: 'admin'
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
        username: [{ required: true, trigger: 'blur', validator: validPhone }],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 24, message: '密码由6-24个字符组成，区分大小写', trigger: 'blur' }
        ],
        imgVerifyCode: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }]
      },
      loading: false,
      pwdType: 'password'
    }
  },
  created() {
    this.changeImgVc()
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
          }).catch(() => {
          return false
        }
      })
    },
    goBackPwd() {
      this.$router.push({ path: '/findPwd' })
    },
    changeImgVc() {
      this.imgVcUrl = getPictureVC('PIC_LOGIN')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$light_gray:#eee;
/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    &_login {
      font-size: 20px;
    }
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    color: $light_gray;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>