update 登录优化

config/index.js

@@ -4,6 +4,7 @@
 
 const path = require('path')
 const devEnv = require('./dev.env')
+const IP = require('ip').address()
 
 module.exports = {
   dev: {
@@ -11,19 +12,15 @@ module.exports = {
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    // 代理列表, 是否开启代理通过[./dev.env.js]配置
-    proxyTable: devEnv.OPEN_PROXY === false ? {} : {
-      '/proxyApi': {
-        target: 'http://demo.renren.io/renren-fast/',
-        changeOrigin: true,
-        pathRewrite: {
-          '^/proxyApi': '/'
-        }
-      }
+    proxyTable: {
+      '/renren-fast-server': {
+        target: 'http://demo.open.renren.io',
+        changeOrigin: true
+      },
     },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: IP, // can be overwritten by process.env.HOST
     port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

package.json

@@ -64,6 +64,7 @@
     "file-loader": "1.1.4",
     "friendly-errors-webpack-plugin": "1.6.1",
     "html-webpack-plugin": "2.30.1",
+    "ip": "^1.1.5",
     "jest": "21.2.0",
     "jest-serializer-vue": "0.3.0",
     "nightwatch": "0.9.12",

src/api/api_menu.js

@@ -0,0 +1,6 @@
+import http from '../utils/http'
+
+// 获取侧边菜单栏
+export const apiGetMenuNav = params => {
+  return http({ url: '/renren-fast-server/sys/menu/nav', method: 'get', params })
+}

src/api/api_user.js

@@ -0,0 +1,11 @@
+import http from '../utils/http'
+
+// 登录
+export const apiLogin = data => {
+  return http({ url: '/renren-fast-server/sys/login', method: 'post', data })
+}
+
+// 获取用户相关
+export const apiGetUserInfo = params => {
+  return http({ url: '/renren-fast-server/sys/user/info', method: 'get', params })
+}

src/router/index.js

@@ -6,7 +6,7 @@
  */
 import Vue from 'vue'
 import Router from 'vue-router'
-import http from '@/utils/httpRequest'
+import { apiGetMenuNav } from '../api/api_menu'
 import { isURL } from '@/utils/validate'
 import { clearLoginInfo } from '@/utils'
 
@@ -49,7 +49,7 @@ const mainRoutes = {
 }
 
 const router = new Router({
-  mode: 'hash',
+  mode: 'history',
   scrollBehavior: () => ({ y: 0 }),
   isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
   routes: globalRoutes.concat(mainRoutes)
@@ -62,25 +62,18 @@ router.beforeEach((to, from, next) => {
   if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to, globalRoutes) === 'global') {
     next()
   } else {
-    http({
-      url: http.adornUrl('/sys/menu/nav'),
-      method: 'get',
-      params: http.adornParams()
-    }).then(({data}) => {
-      if (data && data.code === 0) {
-        fnAddDynamicMenuRoutes(data.menuList)
+    apiGetMenuNav({}).then(res => {
+      if (res && res.code === 0) {
+        fnAddDynamicMenuRoutes(res.menuList)
         router.options.isAddDynamicMenuRoutes = true
-        sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
-        sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
+        sessionStorage.setItem('menuList', JSON.stringify(res.menuList || '[]'))
+        sessionStorage.setItem('permissions', JSON.stringify(res.permissions || '[]'))
         next({ ...to, replace: true })
       } else {
         sessionStorage.setItem('menuList', '[]')
         sessionStorage.setItem('permissions', '[]')
         next()
       }
-    }).catch((e) => {
-      console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
-      router.push({ name: 'login' })
     })
   }
 })

src/utils/http.js

@@ -0,0 +1,48 @@
+import Vue from 'vue'
+import axios from 'axios'
+import router from '@/router'
+import { clearLoginInfo } from '@/utils'
+import { Message } from 'element-ui'
+
+const http = axios.create({
+  timeout: 1000 * 30,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json; charset=utf-8'
+  }
+})
+
+/**
+ * 请求拦截
+ */
+http.interceptors.request.use(config => {
+  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
+  config.data = Object.assign({}, config.data, { t: new Date().getTime() })
+  return config
+},
+error => {
+  return Promise.reject(error)
+})
+
+/**
+ * 响应拦截
+ */
+http.interceptors.response.use(
+  response => {
+    if (response.data && response.data.code === 401) { // 401, token失效
+      clearLoginInfo()
+      router.push({ name: 'login' })
+    }
+    return response.data
+  },
+  error => {
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default http

src/views/common/login.vue

@@ -8,9 +8,9 @@
         </div>
         <div class="login-main">
           <h3 class="login-title">管理员登录</h3>
-          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
-            <el-form-item prop="userName">
-              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
+          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="handleLogin()" status-icon>
+            <el-form-item prop="username">
+              <el-input v-model="dataForm.username" placeholder="帐号"></el-input>
             </el-form-item>
             <el-form-item prop="password">
               <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
@@ -22,12 +22,13 @@
                   </el-input>
                 </el-col>
                 <el-col :span="10" class="login-captcha">
-                  <img :src="captchaPath" @click="getCaptcha()" alt="">
+                  <img @click="handleGetImgCaptcha()" id="img-captcha" :src="'/renren-fast-server/captcha.jpg?uuid='+ this.dataForm.uuid">
+                  <!-- <img :src="captchaPath" @click="getCaptcha()" alt=""> -->
                 </el-col>
               </el-row>
             </el-form-item>
             <el-form-item>
-              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
+              <el-button class="login-btn-submit" type="primary" @click="handleLogin()">登录</el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -38,62 +39,48 @@
 
 <script>
   import { getUUID } from '@/utils'
+  import { apiLogin } from '../../api/api_user'
+
   export default {
     data () {
       return {
         dataForm: {
-          userName: '',
+          username: '',
           password: '',
           uuid: '',
           captcha: ''
         },
         dataRule: {
-          userName: [
-            { required: true, message: '帐号不能为空', trigger: 'blur' }
-          ],
-          password: [
-            { required: true, message: '密码不能为空', trigger: 'blur' }
-          ],
-          captcha: [
-            { required: true, message: '验证码不能为空', trigger: 'blur' }
-          ]
+          username: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
+          password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
+          captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
         },
         captchaPath: ''
       }
     },
     created () {
-      this.getCaptcha()
+      // this.getCaptcha()
+      this.dataForm.uuid = getUUID()
     },
     methods: {
-      // 提交表单
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.$http({
-              url: this.$http.adornUrl('/sys/login'),
-              method: 'post',
-              data: this.$http.adornData({
-                'username': this.dataForm.userName,
-                'password': this.dataForm.password,
-                'uuid': this.dataForm.uuid,
-                'captcha': this.dataForm.captcha
-              })
-            }).then(({data}) => {
-              if (data && data.code === 0) {
-                this.$cookie.set('token', data.token)
-                this.$router.replace({ name: 'home' })
-              } else {
-                this.getCaptcha()
-                this.$message.error(data.msg)
-              }
-            })
+      // 获取图像验证码
+      handleGetImgCaptcha () {
+        this.dataForm.uuid = getUUID()
+        let imgSrc = document.getElementById('img-captcha')
+        imgSrc.setAttribute('src', '/renren-fast-server/captcha.jpg?uuid=' + this.dataForm.uuid)
+      },
+      // 登录提交表单
+      handleLogin () {
+        let param = Object.assign(this.dataForm, { 'uuid': this.dataForm.uuid })
+        apiLogin(param).then(res => {
+          console.log('res==', res)
+          if (res && res.code === 0) {
+            this.$cookie.set('token', res.token)
+            this.$router.replace({ name: 'home' })
+          } else {
+            this.$message.error(res.msg)
           }
         })
-      },
-      // 获取验证码
-      getCaptcha () {
-        this.dataForm.uuid = getUUID()
-        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
       }
     }
   }

src/views/main.vue

@@ -18,6 +18,8 @@
   import MainNavbar from './main-navbar'
   import MainSidebar from './main-sidebar'
   import MainContent from './main-content'
+  import { apiGetUserInfo } from '../api/api_user'
+
   export default {
     provide () {
       return {
@@ -58,7 +60,7 @@
       }
     },
     created () {
-      this.getUserInfo()
+      this.handleGetUserInfo()
     },
     mounted () {
       this.resetDocumentClientHeight()
@@ -71,17 +73,15 @@
           this.documentClientHeight = document.documentElement['clientHeight']
         }
       },
-      // 获取当前管理员信息
-      getUserInfo () {
-        this.$http({
-          url: this.$http.adornUrl('/sys/user/info'),
-          method: 'get',
-          params: this.$http.adornParams()
-        }).then(({data}) => {
-          if (data && data.code === 0) {
+      // 获取当前登录用户的信息
+      handleGetUserInfo () {
+        apiGetUserInfo({}).then(res => {
+          if (res && res.code === 0) {
             this.loading = false
-            this.userId = data.user.userId
-            this.userName = data.user.username
+            this.userId = res.user.userId
+            this.userName = res.user.username
+          } else {
+            this.$message.error(res.msg)
           }
         })
       }

static/config/index.js

@@ -5,8 +5,7 @@
   window.SITE_CONFIG = {}
 
   // api接口请求地址
-  // window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast'
-  window.SITE_CONFIG['baseUrl'] = 'http://demo.open.renren.io/renren-fast-server'
+  window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast'
 
   // cdn地址 = 域名 + 版本号
   window.SITE_CONFIG['domain'] = './' // 域名