feat: add login blocking; :star2: 新增：登录拦截功能；

chenghongxing

2020-07-20 4e6a060dfe743e28d71b099b36e475960f86432f

feat: add login blocking; :star2:
新增：登录拦截功能；

 src/layouts/header/HeaderlAvatar.vue

@@ -15,10 +15,10 @@
      </a-menu-item>
      <a-menu-divider />
      <a-menu-item>
        <router-link to="/login">
        <a @click="logout">
          <a-icon type="poweroff" />
          <span>退出登录</span>
        </router-link>
        </a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
@@ -26,12 +26,18 @@

<script>
import {mapState} from 'vuex'
import {logout} from '@/services'

export default {
  name: 'HeaderAvatar',
  computed: {
    ...mapState('setting', ['weekMode']),
    ...mapState('account', ['user']),
  },
  methods: {
    logout() {
      logout()
      this.$router.push('/login')
    }
  }
}
</script>

 src/mock/user/login.js

@@ -21,6 +21,7 @@
    result.data = {}
    result.data.user = user
    result.data.token = 'Authorization:' + Math.random()
    result.data.expireAt = new Date(new Date().getTime() + 30 * 60 * 1000)
  }
  return result
})

 src/pages/login/Login.vue

@@ -110,9 +110,9 @@
      const result = res.data
      if (result.code >= 0) {
        const user = result.data.user
        setAuthorization({token: result.data.token, expireAt: new Date(result.data.expireAt)})
        this.$router.push('/dashboard/workplace')
        this.$store.commit('account/setUser', user)
        setAuthorization({token: result.data.token})
        this.$message.success(result.message, 3)
      } else {
        this.error = result.message

 src/router/index.js

@@ -1,4 +1,5 @@
import Vue from 'vue'
import {checkAuthorization} from '@/utils/request'
import Router from 'vue-router'
import PageView from '@/layouts/PageView'
import BlankView from '@/layouts/BlankView'
@@ -7,7 +8,7 @@

Vue.use(Router)

export default new Router({
const router =  new Router({
  routes: [
    {
      path: '/login',
@@ -201,3 +202,14 @@
    }
  ]
})

// 登录拦截
router.beforeEach((to, from, next) => {
  if (to.path !== '/login' && !checkAuthorization()) {
    next({path: '/login'})
  } else {
    next()
  }
})

export default router

 src/services/index.js

@@ -1,5 +1,6 @@
import {login} from './user'
import {login, logout} from './user'

export {
  login
  login,
  logout
}

 src/services/user.js

@@ -1,5 +1,5 @@
import {LOGIN} from '@/services/api'
import {request, METHOD} from '@/utils/request'
import {request, METHOD, removeAuthorization} from '@/utils/request'

/**
 * 登录服务
@@ -14,4 +14,11 @@
  })
}

export {login}
/**
 * 退出登录
 */
function logout() {
  removeAuthorization()
}

export {login, logout}

 src/utils/request.js

@@ -43,13 +43,13 @@

/**
 * 设置认证信息
 * @param token {Object}
 * @param auth {Object}
 * @param authType {AUTH_TYPE} 认证类型，默认：{AUTH_TYPE.BEARER}
 */
function setAuthorization(auth, authType = AUTH_TYPE.BEARER) {
  switch (authType) {
    case AUTH_TYPE.BEARER:
      Cookie.set(xsrfHeaderName, 'Bearer ' + auth.token)
      Cookie.set(xsrfHeaderName, 'Bearer ' + auth.token, {expires: auth.expireAt})
      break
    case AUTH_TYPE.BASIC:
    case AUTH_TYPE.AUTH1:
@@ -59,9 +59,49 @@
  }
}

/**
 * 移出认证信息
 * @param authType {AUTH_TYPE} 认证类型
 */
function removeAuthorization(authType = AUTH_TYPE.BEARER) {
  switch (authType) {
    case AUTH_TYPE.BEARER:
      Cookie.remove(xsrfHeaderName)
      break
    case AUTH_TYPE.BASIC:
    case AUTH_TYPE.AUTH1:
    case AUTH_TYPE.AUTH2:
    default:
      break
  }
}

/**
 * 检查认证信息
 * @param authType
 * @returns {boolean}
 */
function checkAuthorization(authType = AUTH_TYPE.BEARER) {
  switch (authType) {
    case AUTH_TYPE.BEARER:
      if (Cookie.get(xsrfHeaderName)) {
        return true
      }
      break
    case AUTH_TYPE.BASIC:
    case AUTH_TYPE.AUTH1:
    case AUTH_TYPE.AUTH2:
    default:
      break
  }
  return false
}

export {
  METHOD,
  AUTH_TYPE,
  request,
  setAuthorization
  setAuthorization,
  removeAuthorization,
  checkAuthorization
}