.

src/api/oss.js

@@ -0,0 +1,60 @@
+import OSS from 'ali-oss'
+import request from '@/utils/request'
+
+let client
+let stsInfo
+
+/**
+ * 获取 OSS-STS 临时凭证
+ * @returns
+ */
+export const getSTSToken = () => request({ url: '/admin/oss-sts' })
+
+/**
+ * 获取 OSS 客户端
+ * @returns
+ */
+export function getOSSClient() {
+  if (client) {
+    return Promise.resolve(client)
+  }
+
+  return getSTSToken().then((sts) => {
+    stsInfo = sts
+    client = new OSS({
+      accessKeyId: sts.data.accessKeyId,
+      accessKeySecret: sts.data.accessKeySecret,
+      stsToken: sts.data.stsToken,
+      bucket: sts.data.bucket,
+      endpoint: sts.data.endpoint,
+      refreshSTSTokenInterval: 25 * 60 * 1000, // 每25min刷新一次
+      refreshSTSToken: () => {
+        return getSTSToken().then((res) => {
+          return {
+            accessKeyId: res.accessKeyId,
+            accessKeySecret: res.accessKeySecret,
+            stsToken: res.stsToken
+          }
+        })
+      }
+    })
+
+    return client
+  })
+}
+
+/**
+ * 上传文件到 OSS
+ * @param {*} file
+ * @returns
+ */
+export function upload(file) {
+  return getOSSClient().then(() => {
+    const data = new FormData()
+    data.append('file', file)
+    const now = new Date()
+    const fileName = `${stsInfo.path}/${now.valueOf()}-${file.name}`
+
+    return client.put(fileName, file).then((res) => res.url)
+  })
+}

src/api/signup.js

@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+/**
+* 注册账号
+* @param {*} data
+* @returns
+*/
+export const signUp = (data) => request({
+  url: '/admin/signup',
+  method: 'post',
+  data
+})
+
+/**
+ * 获取验证码
+ * @param {*} params
+ * @returns
+ */
+export const getCaptcha = (params) => request({
+  url: '/admin/captcha', params
+})

src/api/user.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function login(data) {
+  return request({
+    url: '/admin/login',
+    method: 'post',
+    data
+  })
+}

src/layout/components/Navbar.vue

@@ -3,6 +3,31 @@
     <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb class="breadcrumb-container" />
+
+    <div class="right-menu">
+      <el-dropdown class="avatar-container" trigger="click">
+        <div class="avatar-wrapper">
+          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+          <router-link to="/">
+            <el-dropdown-item>
+              Home
+            </el-dropdown-item>
+          </router-link>
+          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
+            <el-dropdown-item>Github</el-dropdown-item>
+          </a>
+          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+            <el-dropdown-item>Docs</el-dropdown-item>
+          </a>
+          <el-dropdown-item divided @click.native="logout">
+            <span style="display:block;">Log Out</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
   </div>
 </template>
 
@@ -25,6 +50,10 @@ export default {
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     }
   }
 }

src/main.js

@@ -13,6 +13,8 @@ import store from './store'
 import router from './router'
 
 import '@/icons' // icon
+import '@/permission' // permission control
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -30,6 +32,7 @@ import '@/icons' // icon
 // Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
 Vue.use(ElementUI)
+
 Vue.config.productionTip = false
 
 new Vue({

src/permission.js

@@ -0,0 +1,60 @@
+import router from './router'
+import store from './store'
+import { Message } from 'element-ui'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const whiteList = ['/login', '/login/forgotPassword', '/login/register'] // no redirect whitelist
+
+router.beforeEach(async(to, from, next) => {
+  // start progress bar
+  NProgress.start()
+
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+
+  // determine whether the user has logged in
+  const hasToken = getToken()
+  if (hasToken) {
+    if (to.path === '/login') {
+      // if is logged in, redirect to the home page
+      next({ path: '/' })
+      NProgress.done()
+    } else {
+      const hasGetUserInfo = store.getters.name
+      if (hasGetUserInfo) {
+        next()
+      } else {
+        try {
+          next()
+        } catch (error) {
+          // remove token and go to login page to re-login
+          await store.dispatch('user/resetToken')
+          Message.error(error || 'Has Error')
+          next(`/login?redirect=${to.path}`)
+          NProgress.done()
+        }
+      }
+    }
+  } else {
+    /* has no token*/
+
+    if (whiteList.indexOf(to.path) !== -1) {
+      // in the free login whitelist, go directly
+      next()
+    } else {
+      // other pages that do not have permission to access are redirected to the login page.
+      next(`/login?redirect=${to.path}`)
+      NProgress.done()
+    }
+  }
+})
+
+router.afterEach(() => {
+  // finish progress bar
+  NProgress.done()
+})

src/router/index.js

@@ -72,11 +72,32 @@ export const constantRoutes = [
     ]
   },
 
+  {
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+
+  {
+    path: '/login/register',
+    component: () => import('@/views/login/register'),
+    hidden: true,
+    name: 'register'
+  },
+
+  {
+    path: '/login/forgotPassword',
+    component: () => import('@/views/login/forgotPassword'),
+    hidden: true,
+    name: 'forgotPassword'
+  },
+
   {
     path: '/404',
     component: () => import('@/views/404'),
     hidden: true
   },
+
   {
     path: 'external-link',
     component: Layout,

src/store/getters.js

@@ -1,5 +1,8 @@
 const getters = {
   sidebar: state => state.app.sidebar,
-  device: state => state.app.device
+  device: state => state.app.device,
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  name: state => state.user.name
 }
 export default getters

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import getters from './getters'
 import app from './modules/app'
 import settings from './modules/settings'
+import user from './modules/user'
 import game from './modules/game'
 
 Vue.use(Vuex)
@@ -11,6 +12,7 @@ const store = new Vuex.Store({
   modules: {
     app,
     settings,
+    user,
     game
   },
   getters

src/store/modules/user.js

@@ -0,0 +1,67 @@
+import { login } from '@/api/user'
+import { getToken, setToken, removeToken, setUserId } from '@/utils/auth'
+import { resetRouter } from '@/router'
+
+const getDefaultState = () => {
+  return {
+    token: getToken()
+  }
+}
+
+const state = getDefaultState()
+
+// 定义Mutations
+const mutations = {
+  RESET_STATE: (state) => {
+    Object.assign(state, getDefaultState())
+  },
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  }
+}
+// 在actions里面增加一个才可以在页面加
+// this.$store.dispatch('user/login', this.loginForm)调用api里面的方法
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { userName, password } = userInfo
+    return new Promise((resolve, reject) => {
+      login({ userName: userName.trim(), password: password }).then(response => {
+        const { data } = response
+        commit('SET_TOKEN', data.token)
+        setToken(data.token)
+        setUserId('admin')
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // user logout
+  logout({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      removeToken() // must remove  token  first
+      resetRouter()
+      commit('RESET_STATE')
+      resolve()
+    })
+  },
+
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      removeToken() // must remove  token  first
+      commit('RESET_STATE')
+      resolve()
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/utils/auth.js

@@ -0,0 +1,25 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
+
+const UserIdKey = 'user'
+
+export function setUserId(userId) {
+  return Cookies.set(UserIdKey, userId)
+}
+export function getUserId() {
+  return Cookies.get(UserIdKey)
+}

src/utils/request.js

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { Message } from 'element-ui'
 import store from '@/store'
+import { getToken, getUserId } from '@/utils/auth'
 import { downloadBlob } from './download'
 
 // create an axios instance
@@ -19,6 +20,8 @@ service.interceptors.request.use(
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
+      config.headers['X-Authorization-JWT'] = getToken()
+      config.headers['x-userid'] = getUserId()
     }
     return config
   },
@@ -43,6 +46,7 @@ service.interceptors.response.use(
    */
   response => {
     const res = response.data
+    // if the custom code is not 20000, it is judged as an error.
     const contextType = response.headers['content-type']
     if (contextType.indexOf('application/vnd.ms-excel') > -1) {
       const data = new Blob([res])

src/utils/upload.js

@@ -0,0 +1,17 @@
+import { upload } from '@/api/oss'
+
+/**
+ * 获取 OSS 客户端
+ * @returns
+ */
+export function uploadFile({ file, onSuccess, onError }) {
+  upload(file).then((url) => {
+    onSuccess(url, file)
+  }).catch((e) => {
+    onError(e)
+  })
+
+  return {
+    abort: () => {}
+  }
+}

src/views/login/forgotPassword.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="login-container">
+    <el-form
+      ref="regisiterForm"
+      :model="regisiterForm"
+      :rules="regisiterRules"
+      class="login-form"
+      auto-complete="on"
+      label-position="left"
+    >
+      <div class="title-container">
+        <h3 class="title">找回密码</h3>
+      </div>
+
+      <el-form-item prop="phone">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          ref="phone"
+          v-model="regisiterForm.phone"
+          type="tel"
+          placeholder="手机号"
+          name="phone"
+          tabindex="1"
+        />
+      </el-form-item>
+
+      <el-form-item prop="captcha" style="width:65%">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          ref="captcha"
+          v-model="regisiterForm.captcha"
+          type="text"
+          placeholder="验证码"
+          tabindex="2"
+          name="captcha"
+        />
+        <el-button style="position: absolute;right: -150px;top: 6px;" :disabled="disabled" @click="sendCode">{{ btnText }}</el-button>
+      </el-form-item>
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          ref="password"
+          v-model="regisiterForm.password"
+          type="text"
+          placeholder="密码"
+          name="password"
+          tabindex="3"
+          @keyup.enter.native="handleLogin"
+        />
+      </el-form-item>
+      <el-button
+        :loading="loading"
+        type="primary"
+        style="width: 100%; margin-bottom: 30px"
+        @click.native.prevent="handleLogin"
+      >找回密码</el-button>
+    </el-form>
+  </div>
+</template>
+<script>
+import { getCaptcha, signUp } from '@/api/signup'
+import md5 from 'js-md5'
+export default {
+  name: 'Login',
+  data() {
+    const validatePhone = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('手机号不能为空'))
+      } else {
+        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
+        if (reg.test(value)) {
+          callback()
+        } else {
+          return callback(new Error('请输入正确的手机号'))
+        }
+      }
+    }
+    return {
+      regisiterForm: {
+        password: '',
+        phone: undefined,
+        captcha: undefined
+      },
+      regisiterRules: {
+        password: [
+          { required: true, trigger: 'change', message: '请输入密码' }
+        ],
+        phone: [
+          { required: true, trigger: 'change', validator: validatePhone }
+        ],
+        captcha: [
+          { required: true, trigger: 'change', message: '请输入验证码' }
+        ]
+      },
+      disabled: false,
+      btnText: '发送验证码',
+      time: 0,
+      loading: false
+    }
+  },
+  methods: {
+    sendCode() {
+      this.disabled = true
+
+      this.$refs.regisiterForm.validateField('phone', (errorMessage) => {
+        if (errorMessage) {
+          this.$message.error(errorMessage)
+
+          this.disabled = false
+        } else {
+          getCaptcha({ phone: this.regisiterForm.phone })
+            .then((e) => {})
+            .catch((res) => {
+            })
+          this.time = 60
+          const timer = setInterval(() => {
+            this.time-- // 倒计时递减
+            this.btnText = `${this.time}s后重新发送`
+            if (this.time === 0) {
+              this.disabled = false
+              this.btnText = '重新发送'
+              this.time = this.countDown
+              clearInterval(timer)
+            }
+          }, 1000)
+        }
+      })
+    },
+    handleLogin() {
+      this.$refs.regisiterForm.validate((valid) => {
+        if (valid) {
+          this.regisiterForm.password = md5(this.regisiterForm.password)
+          // signUp(this.regisiterForm).then((res) => {
+          this.$message('修改密码成功')
+          this.$router.push({ path: '/login' })
+          // })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* 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;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !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 lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .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;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      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>

src/views/login/index.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="login-container">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      auto-complete="on"
+      label-position="left"
+    >
+      <div class="title-container">
+        <h3 class="title">答题管理系统</h3>
+      </div>
+
+      <el-form-item prop="userName">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="userName"
+          v-model="loginForm.userName"
+          placeholder="用户名"
+          name="userName"
+          type="text"
+          tabindex="1"
+          auto-complete="on"
+        />
+      </el-form-item>
+
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          :key="passwordType"
+          ref="password"
+          v-model="loginForm.password"
+          :type="passwordType"
+          placeholder="密码"
+          name="password"
+          tabindex="2"
+          auto-complete="on"
+          @keyup.enter.native="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon
+            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+          />
+        </span>
+      </el-form-item>
+
+      <el-button
+        :loading="loading"
+        type="primary"
+        style="width: 100%; margin-bottom: 30px"
+        @click.native.prevent="handleLogin"
+      >登录</el-button>
+      <el-link :underline="false" style="margin:0" type="primary">
+        <router-link
+          :to="{name: 'register'}"
+        >注册账号</router-link>
+      </el-link>
+      <el-link :underline="false" style="float:right" type="primary">
+        <router-link
+          :to="{name: 'forgotPassword'}"
+        >忘记密码</router-link>
+      </el-link>
+    </el-form>
+  </div>
+</template>
+<script>
+import md5 from 'js-md5'
+export default {
+  name: 'Login',
+  data() {
+    return {
+      loginForm: {
+        userName: '',
+        password: ''
+      },
+      loginRules: {
+        userName: [
+          { required: true, message: '请输入用户名', trigger: 'change' }
+        ],
+        password: [
+          { required: true, trigger: 'change', message: '请输入密码' }
+        ]
+      },
+      loading: false,
+      passwordType: 'password',
+      redirect: undefined
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true
+          this.loginForm.password = md5(this.loginForm.password)
+          this.$store
+            .dispatch('user/login', this.loginForm)
+            .then(() => {
+              this.$router.push({ path: '/' })
+              this.loading = false
+            })
+            .catch(() => {
+              this.loading = false
+            })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* 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;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !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 lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .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;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      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>

src/views/login/register.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="login-container">
+    <el-form
+      ref="regisiterForm"
+      :model="regisiterForm"
+      :rules="regisiterRules"
+      class="login-form"
+      auto-complete="on"
+      label-position="left"
+    >
+      <div class="title-container">
+        <h3 class="title">注册账号</h3>
+      </div>
+
+      <el-form-item prop="name">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="name"
+          v-model="regisiterForm.name"
+          placeholder="用户名"
+          name="name"
+          type="text"
+          tabindex="1"
+        />
+      </el-form-item>
+
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          :key="passwordType"
+          ref="password"
+          v-model="regisiterForm.password"
+          :type="passwordType"
+          placeholder="密码"
+          name="password"
+          tabindex="2"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon
+            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+          />
+        </span>
+      </el-form-item>
+      <el-form-item prop="password2">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          ref="password2"
+          v-model="regisiterForm.password2"
+          type="text"
+          placeholder="确认密码"
+          name="password2"
+          tabindex="3"
+        />
+      </el-form-item>
+      <el-form-item prop="phone">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          ref="phone"
+          v-model="regisiterForm.phone"
+          type="tel"
+          placeholder="手机号"
+          name="phone"
+          tabindex="4"
+        />
+      </el-form-item>
+
+      <el-form-item prop="captcha" style="width:65%">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          ref="captcha"
+          v-model="regisiterForm.captcha"
+          type="text"
+          placeholder="验证码"
+          tabindex="5"
+          name="captcha"
+          @keyup.enter.native="handleLogin"
+        />
+        <el-button style="position: absolute;right: -150px;top: 6px;" :disabled="disabled" @click="sendCode">{{ btnText }}</el-button>
+      </el-form-item>
+
+      <el-button
+        :loading="loading"
+        type="primary"
+        style="width: 100%; margin-bottom: 30px"
+        @click.native.prevent="handleLogin"
+      >注册</el-button>
+      <el-link :underline="false" style="margin:0" type="primary">
+        <router-link
+          :to="{path: '/login'}"
+        >登录系统</router-link>
+      </el-link>
+      <el-link :underline="false" style="float:right" type="primary">
+        <router-link
+          :to="{name: 'forgotPassword'}"
+        >忘记密码</router-link>
+      </el-link>
+    </el-form>
+  </div>
+</template>
+<script>
+import { getCaptcha, signUp } from '@/api/signup'
+import md5 from 'js-md5'
+export default {
+  name: 'Login',
+  data() {
+    const validatePhone = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('手机号不能为空'))
+      } else {
+        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
+        if (reg.test(value)) {
+          callback()
+        } else {
+          return callback(new Error('请输入正确的手机号'))
+        }
+      }
+    }
+    return {
+      regisiterForm: {
+        name: undefined,
+        password: undefined,
+        phone: undefined,
+        captcha: '619400',
+        password2: undefined
+      },
+      regisiterRules: {
+        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        password: [
+          { required: true, trigger: 'change', message: '请输入密码' }
+        ],
+        password2: [
+          { required: true, trigger: 'change', message: '请再次输入密码' }
+        ],
+        phone: [
+          { required: true, trigger: 'change', validator: validatePhone }
+        ],
+        captcha: [
+          { required: true, trigger: 'change', message: '请输入验证码' }
+        ]
+      },
+      disabled: false,
+      btnText: '发送验证码',
+      time: 0,
+      loading: false,
+      passwordType: 'password'
+    }
+  },
+  methods: {
+    sendCode() {
+      this.disabled = true
+
+      this.$refs.regisiterForm.validateField('phone', (errorMessage) => {
+        if (errorMessage) {
+          this.$message.error(errorMessage)
+
+          this.disabled = false
+        } else {
+          getCaptcha({ phone: this.regisiterForm.phone })
+            .then((e) => {})
+            .catch((res) => {
+              // console.log(res)
+            })
+          this.time = 60
+          const timer = setInterval(() => {
+            this.time-- // 倒计时递减
+            this.btnText = `${this.time}s后重新发送`
+            if (this.time === 0) {
+              this.disabled = false
+              this.btnText = '重新发送'
+              this.time = this.countDown
+              clearInterval(timer)
+            }
+          }, 1000)
+        }
+      })
+    },
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    handleLogin() {
+      this.$refs.regisiterForm.validate((valid) => {
+        if (valid) {
+          if (this.regisiterForm.password !== this.regisiterForm.password2) {
+            this.$message('密码输入不一致请重新输入')
+            this.$refs.password2.focus()
+            return false
+          } else {
+            this.regisiterForm.password = md5(this.regisiterForm.password)
+            signUp(this.regisiterForm).then((res) => {
+              this.$message('注册成功')
+              this.$router.push({ path: '/login' })
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* 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;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !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 lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .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;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      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>

tests/unit/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+}

tests/unit/components/Breadcrumb.spec.js

@@ -0,0 +1,70 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import VueRouter from 'vue-router'
+import ElementUI from 'element-ui'
+import Breadcrumb from '@/components/Breadcrumb/index.vue'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+localVue.use(ElementUI)
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    children: [{
+      path: 'dashboard',
+      name: 'dashboard'
+    }]
+  },  
+]
+
+const router = new VueRouter({
+  routes
+})
+
+describe('Breadcrumb.vue', () => {
+  const wrapper = mount(Breadcrumb, {
+    localVue,
+    router
+  })
+  it('dashboard', () => {
+    router.push('/dashboard')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(1)
+  })
+  it('normal route', () => {
+    router.push('/menu/menu1')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(2)
+  })
+  it('nested route', () => {
+    router.push('/menu/menu1/menu1-2/menu1-2-1')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(4)
+  })
+  it('no meta.title', () => {
+    router.push('/menu/menu1/menu1-2/menu1-2-2')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(3)
+  })
+  // it('click link', () => {
+  //   router.push('/menu/menu1/menu1-2/menu1-2-2')
+  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
+  //   const second = breadcrumbArray.at(1)
+  //   console.log(breadcrumbArray)
+  //   const href = second.find('a').attributes().href
+  //   expect(href).toBe('#/menu/menu1')
+  // })
+  // it('noRedirect', () => {
+  //   router.push('/menu/menu1/menu1-2/menu1-2-1')
+  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
+  //   const redirectBreadcrumb = breadcrumbArray.at(2)
+  //   expect(redirectBreadcrumb.contains('a')).toBe(false)
+  // })
+  it('last breadcrumb', () => {
+    router.push('/menu/menu1/menu1-2/menu1-2-1')
+    const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
+    const redirectBreadcrumb = breadcrumbArray.at(3)
+    expect(redirectBreadcrumb.contains('a')).toBe(false)
+  })
+})

tests/unit/components/Hamburger.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Hamburger from '@/components/Hamburger/index.vue'
+describe('Hamburger.vue', () => {
+  it('toggle click', () => {
+    const wrapper = shallowMount(Hamburger)
+    const mockFn = jest.fn()
+    wrapper.vm.$on('toggleClick', mockFn)
+    wrapper.find('.hamburger').trigger('click')
+    expect(mockFn).toBeCalled()
+  })
+  it('prop isActive', () => {
+    const wrapper = shallowMount(Hamburger)
+    wrapper.setProps({ isActive: true })
+    expect(wrapper.contains('.is-active')).toBe(true)
+    wrapper.setProps({ isActive: false })
+    expect(wrapper.contains('.is-active')).toBe(false)
+  })
+})

tests/unit/components/SvgIcon.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+describe('SvgIcon.vue', () => {
+  it('iconClass', () => {
+    const wrapper = shallowMount(SvgIcon, {
+      propsData: {
+        iconClass: 'test'
+      }
+    })
+    expect(wrapper.find('use').attributes().href).toBe('#icon-test')
+  })
+  it('className', () => {
+    const wrapper = shallowMount(SvgIcon, {
+      propsData: {
+        iconClass: 'test'
+      }
+    })
+    expect(wrapper.classes().length).toBe(1)
+    wrapper.setProps({ className: 'test' })
+    expect(wrapper.classes().includes('test')).toBe(true)
+  })
+})

tests/unit/utils/formatTime.spec.js

@@ -0,0 +1,30 @@
+import { formatTime } from '@/utils/index.js'
+
+describe('Utils:formatTime', () => {
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
+  const retrofit = 5 * 1000
+
+  it('ten digits timestamp', () => {
+    expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分')
+  })
+  it('test now', () => {
+    expect(formatTime(+new Date() - 1)).toBe('刚刚')
+  })
+  it('less two minute', () => {
+    expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前')
+  })
+  it('less two hour', () => {
+    expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前')
+  })
+  it('less one day', () => {
+    expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前')
+  })
+  it('more than one day', () => {
+    expect(formatTime(d)).toBe('7月13日17时54分')
+  })
+  it('format', () => {
+    expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
+    expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
+    expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
+  })
+})

tests/unit/utils/param2Obj.spec.js

@@ -0,0 +1,14 @@
+import { param2Obj } from '@/utils/index.js'
+describe('Utils:param2Obj', () => {
+  const url = 'https://github.com/PanJiaChen/vue-element-admin?name=bill&age=29&sex=1&field=dGVzdA==&key=%E6%B5%8B%E8%AF%95'
+
+  it('param2Obj test', () => {
+    expect(param2Obj(url)).toEqual({
+      name: 'bill',
+      age: '29',
+      sex: '1',
+      field: window.btoa('test'),
+      key: '测试'
+    })
+  })
+})

tests/unit/utils/parseTime.spec.js

@@ -0,0 +1,35 @@
+import { parseTime } from '@/utils/index.js'
+
+describe('Utils:parseTime', () => {
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
+  it('timestamp', () => {
+    expect(parseTime(d)).toBe('2018-07-13 17:54:01')
+  })
+  it('timestamp string', () => {
+    expect(parseTime((d + ''))).toBe('2018-07-13 17:54:01')
+  })
+  it('ten digits timestamp', () => {
+    expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
+  })
+  it('new Date', () => {
+    expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')
+  })
+  it('format', () => {
+    expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
+    expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
+    expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
+  })
+  it('get the day of the week', () => {
+    expect(parseTime(d, '{a}')).toBe('五') // 星期五
+  })
+  it('get the day of the week', () => {
+    expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日
+  })
+  it('empty argument', () => {
+    expect(parseTime()).toBeNull()
+  })
+
+  it('null', () => {
+    expect(parseTime(null)).toBeNull()
+  })
+})

tests/unit/utils/validate.spec.js

@@ -0,0 +1,17 @@
+import { validUsername, isExternal } from '@/utils/validate.js'
+
+describe('Utils:validate', () => {
+  it('validUsername', () => {
+    expect(validUsername('admin')).toBe(true)
+    expect(validUsername('editor')).toBe(true)
+    expect(validUsername('xxxx')).toBe(false)
+  })
+  it('isExternal', () => {
+    expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)
+    expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)
+    expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false)
+    expect(isExternal('/dashboard')).toBe(false)
+    expect(isExternal('./dashboard')).toBe(false)
+    expect(isExternal('dashboard')).toBe(false)
+  })
+})

yarn.lock

@@ -4749,7 +4749,6 @@ file-loader@^4.2.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
-
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/file-uri-to-path/download/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -9093,11 +9092,6 @@ raw-body@2.4.2, raw-body@^2.2.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-raw-loader@~0.5.1:
-  version "0.5.1"
-  resolved "https://registry.npmmirror.com/raw-loader/download/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
-  integrity sha1-DD0L6u2KAclm2Xh793goElKpeao=
-
 react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.npmmirror.com/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9607,13 +9601,6 @@ script-ext-html-webpack-plugin@2.1.3:
   dependencies:
     debug "^4.1.0"
 
-script-loader@^0.7.2:
-  version "0.7.2"
-  resolved "https://registry.npmmirror.com/script-loader/download/script-loader-0.7.2.tgz#2016db6f86f25f5cf56da38915d83378bb166ba7"
-  integrity sha1-IBbbb4byX1z1baOJFdgzeLsWa6c=
-  dependencies:
-    raw-loader "~0.5.1"
-
 sdk-base@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/sdk-base/download/sdk-base-2.0.1.tgz#ba40289e8bdf272ed11dd9ea97eaf98e036d24c6"