注销用户

src/api/user.js

@@ -22,3 +22,11 @@ export const checkTokenValid = (user, token) => request({
         token
     }
 });
+
+export const cancelToken = (name) => request({
+    url: '/user_api/auth/token/cancel',
+    method: 'get',
+    params: {
+        username: name
+    }
+});

src/config/axios.js

@@ -3,7 +3,7 @@ import router from '@/router/router'
 import store from '@/store/store';
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import {getToken} from '@/util/auth'
+import {getTokenCookies, getUserCookies} from '@/util/auth'
 import {showError} from '@/util/util'
 
 //返回其他状态码
@@ -22,7 +22,8 @@ NProgress.configure({
 axios.interceptors.request.use(config => {
     NProgress.start();
     config.headers['Content-Type'] = 'application/json';
-    config.headers['Auth-Token'] = getToken();
+    config.headers['Auth-User'] = getUserCookies();
+    config.headers['Auth-Token'] = getTokenCookies();
     return config;
 }, error => {
     return Promise.reject(error)

src/router/common/index.js

@@ -2,7 +2,8 @@ export default [
     {
         path: '*',
         redirect: '/404'
-    }, {
+    },
+    {
         name: 'login',
         path: '/login',
         meta: {
@@ -10,14 +11,16 @@ export default [
             title: 'DC3 Web UI Login'
         },
         component: () => import('@/views/login/Login')
-    }, {
+    },
+    {
         name: 'index',
         path: '/',
         redirect: '/home',
         meta: {
             isAuth: true
         }
-    }, {
+    },
+    {
         name: '404',
         path: '/404',
         meta: {
@@ -26,7 +29,8 @@ export default [
         },
         component: () => import('@/components/error/404')
 
-    }, {
+    },
+    {
         name: '403',
         path: '/403',
         meta: {
@@ -34,7 +38,8 @@ export default [
             title: '403'
         },
         component: () => import('@/components/error/403')
-    }, {
+    },
+    {
         name: '500',
         path: '/500',
         meta: {

src/router/router.js

@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
 import CommonRouter from './common/index'
 import ViewsRouter from './views/index'
 import NProgress from "nprogress";
-import {getToken, getUser} from "@/util/auth";
+import {getTokenCookies, getUserCookies} from "@/util/auth";
 import store from "@/store/store";
 import {checkTokenValid} from "@/api/user";
 
@@ -35,13 +35,13 @@ router.beforeEach((to, from, next) => {
     if (meta.isAuth !== true) {
         next();
     } else {
-        const token = getToken(), user = getUser();
+        const token = getTokenCookies(), user = getUserCookies();
         if ('' === token || undefined === token || '' === user || undefined === user) {
             next({path: '/login'});
             return;
         }
         checkTokenValid(user, token).then(res => {
-            if (res.ok && store.getters.token.length > 0) {
+            if (res.ok) {
                 next();
             } else {
                 throw new Error(res.message);

src/router/views/index.js

@@ -14,7 +14,8 @@ export default [
                     title: '首页'
                 },
                 component: () => import('@/views/home/Home')
-            }, {
+            },
+            {
                 name: 'driver',
                 path: '/driver',
                 meta: {
@@ -22,7 +23,8 @@ export default [
                     title: '驱动'
                 },
                 component: () => import('@/views/driver/Driver')
-            }, {
+            },
+            {
                 name: 'driverAttribute',
                 path: '/driverAttribute',
                 meta: {
@@ -30,7 +32,8 @@ export default [
                     title: '驱动属性'
                 },
                 component: () => import('@/views/driver/DriverAttribute')
-            }, {
+            },
+            {
                 name: 'pointAttribute',
                 path: '/pointAttribute',
                 meta: {
@@ -38,7 +41,8 @@ export default [
                     title: '位号属性'
                 },
                 component: () => import('@/views/point/PointAttribute')
-            }, {
+            },
+            {
                 name: 'profile',
                 path: '/profile',
                 meta: {
@@ -46,7 +50,8 @@ export default [
                     title: '模版'
                 },
                 component: () => import('@/views/profile/Profile')
-            }, {
+            },
+            {
                 name: 'driverInfo',
                 path: '/driverInfo',
                 meta: {
@@ -54,7 +59,8 @@ export default [
                     title: '驱动配置'
                 },
                 component: () => import('@/views/driver/DriverInfo')
-            }, {
+            },
+            {
                 name: 'point',
                 path: '/point',
                 meta: {
@@ -62,7 +68,8 @@ export default [
                     title: '位号'
                 },
                 component: () => import('@/views/point/Point')
-            }, {
+            },
+            {
                 name: 'group',
                 path: '/group',
                 meta: {
@@ -70,7 +77,8 @@ export default [
                     title: '分组'
                 },
                 component: () => import('@/views/group/Group')
-            }, {
+            },
+            {
                 name: 'device',
                 path: '/device',
                 meta: {
@@ -78,7 +86,8 @@ export default [
                     title: '设备'
                 },
                 component: () => import('@/views/device/Device')
-            }, {
+            },
+            {
                 name: 'pointInfo',
                 path: '/pointInfo',
                 meta: {
@@ -86,7 +95,8 @@ export default [
                     title: '位号配置'
                 },
                 component: () => import('@/views/point/PointInfo')
-            }, {
+            },
+            {
                 name: 'pointValue',
                 path: '/pointValue',
                 meta: {

src/store/getters.js

@@ -1,5 +1,6 @@
 const getters = {
     token: state => state.user.token,
+    user: state => state.user.user,
 };
 
 export default getters

src/store/modules/user.js

@@ -1,12 +1,12 @@
 import md5 from 'js-md5';
 import {getStore, removeStore, setStore} from '@/util/store'
-import {removeToken, removeUser, setToken, setUser} from '@/util/auth'
+import {removeTokenCookies, removeUserCookies, setTokenCookies, setUserCookies} from '@/util/auth'
-import {generateSalt, generateToken} from '@/api/user'
+import {cancelToken, generateSalt, generateToken} from '@/api/user'
 
 const user = {
     state: {
+        user: getStore({name: 'user'}) || [],
         token: getStore({name: 'token'}) || '',
-        userInfo: getStore({name: 'userInfo'}) || [],
     },
     actions: {
         GenerateSalt(_, name) {
@@ -19,43 +19,53 @@ const user = {
             })
         },
         GenerateToken({commit}, form) {
-            form.user.password = md5(md5(form.user.password) + form.salt);
+            let user = {
+                name: form.user.name,
+                password: md5(md5(form.user.password) + form.salt)
+            };
             return new Promise((resolve, reject) => {
-                generateToken(form.user).then(res => {
+                generateToken(user).then(res => {
                     const data = res.data;
-                    commit('SET_USER', form.user);
+                    commit('SET_USER', user.name);
                     commit('SET_TOKEN', data);
                     resolve();
                 }).catch(error => {
                     reject(error);
-                })
+                });
             })
         },
-        ClearToken({commit}) {
+        ClearToken({commit}, name) {
-            commit('REMOVE_TOKEN');
+            return new Promise((resolve, reject) => {
-            commit('REMOVE_USER');
+                cancelToken(name).then((res) => {
+                    commit('REMOVE_TOKEN');
+                    commit('REMOVE_USER');
+                    resolve(res);
+                }).catch(error => {
+                    reject(error);
+                });
+            })
         }
     },
     mutations: {
+        SET_USER: (state, user) => {
+            setUserCookies(user);
+            state.user = user;
+            setStore({name: 'user', content: state.user, type: 'session'})
+        },
+        REMOVE_USER: (state) => {
+            removeUserCookies();
+            state.user = '';
+            removeStore({name: 'user', type: 'session'});
+        },
         SET_TOKEN: (state, token) => {
-            setToken(token);
+            setTokenCookies(token);
             state.token = token;
             setStore({name: 'token', content: state.token, type: 'session'})
         },
-        SET_USER: (state, userInfo) => {
-            setUser(userInfo.name);
-            state.userInfo = userInfo;
-            setStore({name: 'userInfo', content: state.userInfo})
-        },
         REMOVE_TOKEN: (state) => {
-            removeToken();
+            removeTokenCookies();
             state.token = '';
             removeStore({name: 'token', type: 'session'});
-        },
-        REMOVE_USER: (state) => {
-            removeUser();
-            state.userInfo = '';
-            removeStore({name: 'userInfo'});
         }
     }
 };

src/util/auth.js

@@ -6,26 +6,26 @@ const TokenKey = 'x-access-token';
 // 120分钟，120 * 60 * 1000
 const inFifteenMinutes = new Date(new Date().getTime() + 120 * 60 * 1000);
 
-export function getUser() {
+export function getUserCookies() {
     return Cookies.get(UserKey);
 }
 
-export function setUser(user) {
+export function setUserCookies(user) {
     return Cookies.set(UserKey, user, {expires: inFifteenMinutes});
 }
 
-export function removeUser() {
+export function removeUserCookies() {
     return Cookies.remove(UserKey);
 }
 
-export function getToken() {
+export function getTokenCookies() {
     return Cookies.get(TokenKey);
 }
 
-export function setToken(token) {
+export function setTokenCookies(token) {
     return Cookies.set(TokenKey, token, {expires: inFifteenMinutes});
 }
 
-export function removeToken() {
+export function removeTokenCookies() {
     return Cookies.remove(TokenKey);
 }

src/views/layout/Layout.vue

@@ -58,6 +58,7 @@
 </template>
 
 <script>
+
     export default {
         data() {
             return {};
@@ -70,8 +71,11 @@
             },
             handleCommand(command) {
                 if (command === 'logout') {
-                    this.$store.dispatch('ClearToken').then(() => {
+                    let name = this.$store.getters.user;
-                        this.$router.push('/login');
+                    this.$store.dispatch('ClearToken', name).then((res) => {
+                        if (res.ok) {
+                            this.$router.push('/login');
+                        }
                     });
                 } else {
                     this.$message('click on item ' + command);

src/views/login/Login.vue

@@ -84,20 +84,19 @@
             handleLogin() {
                 this.$refs.loginForm.validate(valid => {
                     if (valid) {
-                        const loading = this.$loading({
+                        let loading = this.$loading({
                             lock: true,
                             text: '登录中,请稍后。。。',
                             spinner: "el-icon-loading"
                         });
                         this.$store.dispatch("GenerateSalt", this.loginForm.name).then((salt) => {
-                            this.$store.dispatch("GenerateToken", {salt, user:this.loginForm}).then(() => {
+                            this.$store.dispatch("GenerateToken", {salt, user: this.loginForm}).then(() => {
-                                this.$router.push({path: '/'});
+                                this.$router.push({path: '/'}).then(() => loading.close());
-                                setTimeout(() => loading.close(), 500);
                             }).catch(() => {
-                                loading.close()
+                                loading.close();
                             });
                         }).catch(() => {
-                            loading.close()
+                            loading.close();
                         });
                     }
                 });