feat()：init

src/api/user.js

@@ -56,3 +56,12 @@ export function deleteUser(id) {
     method: 'get'
   })
 }
+
+export function verify(data = {}, responseType = 'arraybuffer') {
+  return request({
+    url: '/admin/verify',
+    method: 'get',
+    data,
+    responseType
+  })
+}

src/store/modules/user.js

@@ -30,9 +30,9 @@ const mutations = {
 const actions = {
   // user login
   login({ commit }, userInfo) {
-    const { username, password } = userInfo
+    const { username, password, verify } = userInfo
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
+      login({ username: username.trim(), password: password, verify: verify }).then(response => {
         const { data } = response
         console.log(data)
         commit('SET_TOKEN', data.token)

src/utils/request.js

@@ -5,7 +5,6 @@ import { getToken } from '@/utils/auth'
 
 // create an axios instance
 console.log(process.env.VUE_APP_BASE_API)
-
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
@@ -25,6 +24,7 @@ service.interceptors.request.use(
       // config.headers['X-Token'] = getToken()
       config.headers['token'] = getToken()
       config.headers['flag'] = 'admin'
+      config.withCredentials = true
     }
     return config
   },
@@ -50,7 +50,7 @@ service.interceptors.response.use(
   response => {
     const res = response.data
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 1) {
+    if (res.code !== 1 && response.config.url !== '/api/admin/verify') {
       Message({
         message: res.message || 'Error',
         type: 'error',

src/views/city/list.vue

@@ -121,7 +121,6 @@ export default {
           query.pid = node.value ? node.value : 100000
           fetchList(query).then(res => {
             const nodes = []
-            console.log(res.data)
             res.data.list.forEach(v => {
               nodes.push({
                 value: v.id,
@@ -139,6 +138,9 @@ export default {
     this.getList()
   },
   methods: {
+    getCityList(){
+      console.log(222)
+    },
     getList() {
       this.listLoading = true
       fetchList(this.listQuery).then(response => {

src/views/login/index.vue

@@ -40,34 +40,48 @@
           <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
         </span>
       </el-form-item>
-
+      <el-form-item prop="verify">
+        <el-input
+          ref="verify"
+          v-model="loginForm.verify"
+          placeholder="验证码"
+          name="verify"
+          type="text"
+          tabindex="1"
+          auto-complete="on"
+          style="width: 200px;"
+        />
+      </el-form-item>
+      <el-image class="verify" :src="url" @click="changeVerify()" />
       <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
-
-      <div class="tips">
-        <span style="margin-right:20px;">username: admin</span>
-        <span> password: any</span>
-      </div>
-
     </el-form>
   </div>
 </template>
 
 <script>
 import { validUsername } from '@/utils/validate'
+import { verify } from '@/api/user'
 
 export default {
   name: 'Login',
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
+        callback(new Error('请输入正确的用户名'))
       } else {
         callback()
       }
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+        callback(new Error('密码不能少于6位'))
+      } else {
+        callback()
+      }
+    }
+    const validateVerify = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输出验证码'))
       } else {
         callback()
       }
@@ -75,17 +89,25 @@ export default {
     return {
       loginForm: {
         username: 'admin',
-        password: '111111'
+        password: '',
+        verify: ''
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
+        verify: [{ required: true, trigger: 'blur', validator: validateVerify }]
       },
       loading: false,
       passwordType: 'password',
-      redirect: undefined
+      redirect: undefined,
+      url: ''
     }
   },
+  created() {
+    verify().then(res => {
+      this.url = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+    })
+  },
   watch: {
     $route: {
       handler: function(route) {
@@ -95,6 +117,11 @@ export default {
     }
   },
   methods: {
+    changeVerify() {
+      verify().then(res => {
+        this.url = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
+      })
+    },
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''
@@ -109,10 +136,12 @@ export default {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true
+          console.log(this.loginForm)
           this.$store.dispatch('user/login', this.loginForm).then(() => {
             this.$router.push({ path: this.redirect || '/' })
             this.loading = false
           }).catch(() => {
+            this.changeVerify()
             this.loading = false
           })
         } else {
@@ -233,5 +262,12 @@ $light_gray:#eee;
     cursor: pointer;
     user-select: none;
   }
+  .verify {
+    width: 150px;
+    height: 45px;
+    position: relative;
+    top: -70px;
+    left: 296px;
+  }
 }
 </style>