refactor: auth

package.json

@@ -18,7 +18,6 @@
     "echarts": "^5.2.1",
     "element-ui": "^2.15.6",
     "hls.js": "^1.1.2",
-    "js-cookie": "^3.0.1",
     "keycloak-js": "^15.0.2",
     "mediainfo.js": "^0.1.7",
     "mqtt": "^4.2.8",

src/store/mock/user.js

@@ -1,128 +0,0 @@
-import Cookies from 'js-cookie'
-import { resetRouter } from '@/router'
-
-const TokenKey = 'token'
-
-function getToken () {
-  return Cookies.get(TokenKey)
-}
-
-function setToken (token) {
-  return Cookies.set(TokenKey, token)
-}
-
-function removeToken () {
-  return Cookies.remove(TokenKey)
-}
-
-function login (data) {
-  return Promise.resolve({ success: true })
-}
-
-function getInfo (token) {
-  return Promise.resolve({
-    data: {
-      roles: ['admin'],
-      avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-      name: 'Super Admin'
-    }
-  })
-}
-
-function logout () {
-  return Promise.resolve({ success: true })
-}
-
-const state = {
-  token: getToken(),
-  name: '',
-  avatar: '',
-  roles: []
-}
-
-const mutations = {
-  SET_TOKEN (state, token) {
-    state.token = token
-  },
-  SET_NAME (state, name) {
-    state.name = name
-  },
-  SET_AVATAR (state, avatar) {
-    state.avatar = avatar
-  },
-  SET_ROLES (state, roles) {
-    state.roles = roles
-  }
-}
-
-const actions = {
-  login ({ commit }, { username, password }) {
-    return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password }).then(response => {
-        const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token)
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-
-  getInfo ({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
-        const { data } = response
-
-        if (!data) {
-          reject('Verification failed, please Login again.')
-        }
-
-        const { roles, name, avatar } = data
-
-        // roles must be a non-empty array
-        if (!roles || roles.length <= 0) {
-          reject('Roles must be a non-null array!')
-        }
-
-        commit('SET_ROLES', roles)
-        commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
-        resolve(data)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-
-  logout ({ commit }) {
-    return new Promise((resolve, reject) => {
-      logout(state.token).then(() => {
-        commit('SET_TOKEN', '')
-        commit('SET_ROLES', [])
-        removeToken()
-        resetRouter()
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-
-  // remove token
-  resetToken ({ commit }) {
-    return new Promise(resolve => {
-      commit('SET_TOKEN', '')
-      commit('SET_ROLES', [])
-      removeToken()
-      resolve()
-    })
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}

src/store/modules/user.js

@@ -48,18 +48,6 @@ const actions = {
         resolve()
       }, reject)
     })
-  },
-
-  // remove token
-  resetToken ({ commit }) {
-    return new Promise(resolve => {
-      commit('SET_TOKEN', '')
-      resolve()
-    })
-  },
-
-  token ({ commit }, payload) {
-    commit('SET_TOKEN', payload)
   }
 }
 

src/utils/request.js

@@ -91,7 +91,7 @@ service.interceptors.response.use(
             closeOnClickModal: false
           }
         ).then(() => {
-          store.dispatch('user/resetToken').then(() => {
+          store.dispatch('user/logout').then(() => {
             location.reload()
           })
         })

src/views/error-page/index.vue

@@ -7,11 +7,19 @@
         <div class="c-error-page__name">浪潮屏媒安播云平台</div>
       </div>
       <div class="c-error-page__title">{{ message }}</div>
-      <div
-        class="c-error-page__retry u-pointer"
-        @click="retry"
-      >
-        重 试
+      <div class="c-error-page__retry u-pointer">
+        <span
+          class="c-error-page__invoke"
+          @click="retry"
+        >
+          重 试
+        </span>
+        <span
+          class="c-error-page__invoke"
+          @click="logout"
+        >
+          登 出
+        </span>
       </div>
     </div>
   </div>
@@ -38,6 +46,9 @@ export default {
   methods: {
     retry () {
       window.location.reload()
+    },
+    logout () {
+      this.$store.dispatch('user/logout')
     }
   }
 }
@@ -52,7 +63,8 @@ export default {
   &__img {
     flex: 1 1 400px;
     display: inline-block;
-    background: url('~@/assets/illustration.png') 50% 50% / 757px 613px no-repeat;
+    background: url("~@/assets/illustration.png") 50% 50% / 757px 613px
+      no-repeat;
   }
 
   @media screen and (max-width: 900px) {
@@ -82,7 +94,7 @@ export default {
     display: inline-block;
     width: 142px;
     height: 36px;
-    background: url('~@/assets/logo.png') 0 0 / 100% 100% no-repeat;
+    background: url("~@/assets/logo.png") 0 0 / 100% 100% no-repeat;
   }
 
   &__name {
@@ -101,16 +113,19 @@ export default {
   }
 
   &__retry {
-    position: relative;
     margin-top: 40px;
     color: $warning;
     font-size: 16px;
+  }
+
+  &__invoke {
+    position: relative;
 
     &:hover {
       color: $warning--light;
 
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         left: 0;
         right: 0;
@@ -119,6 +134,10 @@ export default {
         border-bottom: 1px solid $warning;
       }
     }
+
+    & + & {
+      margin-left: $spacing;
+    }
   }
 }
 </style>

yarn.lock

@@ -6072,11 +6072,6 @@ js-base64@^2.1.9:
   resolved "https://registry.npmmirror.com/js-base64/download/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha1-9OaGxd4eofhn28rT1G2WlCjfmMQ=
 
-js-cookie@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.nlark.com/js-cookie/download/js-cookie-3.0.1.tgz?cache=0&sync_timestamp=1630493056723&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fjs-cookie%2Fdownload%2Fjs-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
-  integrity sha1-njm0xsL1ZWNwjX0x9vXyGHOpJBQ=
-
 js-message@1.0.7:
   version "1.0.7"
   resolved "https://registry.npm.taobao.org/js-message/download/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"