feat: add login blocking; 🌟

新增：登录拦截功能；

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 @@ Mock.mock('/login', 'post', ({body}) => {
     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 @@ export default {
       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 @@ import Login from '@/pages/login/Login'
 
 Vue.use(Router)
 
-export default new Router({
+const router =  new Router({
   routes: [
     {
       path: '/login',
@@ -201,3 +202,14 @@ export default new Router({
     }
   ]
 })
+
+// 登录拦截
+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 @@ async function login(name, password) {
   })
 }
 
-export {login}
+/**
+ * 退出登录
+ */
+function logout() {
+  removeAuthorization()
+}
+
+export {login, logout}

src/utils/request.js

@@ -43,13 +43,13 @@ async function request(url, method, params) {
 
 /**
  * 设置认证信息
- * @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 @@ function setAuthorization(auth, authType = AUTH_TYPE.BEARER) {
   }
 }
 
+/**
+ * 移出认证信息
+ * @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
 }