登录逻辑调整

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+public
+src

.gitignore

@@ -8,6 +8,8 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+package-lock.json
+yarn.lock
 
 # Log files
 npm-debug.log*

package.json

@@ -20,6 +20,7 @@
     "insert-css": "^2.0.0",
     "js-base64": "latest",
     "js-cookie": "latest",
+    "js-md5": "^0.7.3",
     "nprogress": "latest",
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",

src/api/user.js

@@ -1,12 +1,24 @@
 import request from '@/config/axios'
 
+export const generateSalt = (name) => request({
+    url: '/user_api/auth/token/salt',
+    method: 'get',
+    params: {
+        username: name
+    }
+});
+
 export const generateToken = (user) => request({
-    url: '/user_api/auth/token',
+    url: '/user_api/auth/token/generate',
     method: 'post',
     data: user
 });
 
-export const checkTokenValid = (token) => request({
-    url: '/user_api/auth/token/' + token,
-    method: 'post'
+export const checkTokenValid = (user, token) => request({
+    url: '/user_api/auth/token/check',
+    method: 'get',
+    params: {
+        username: user,
+        token
+    }
 });

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} from "@/util/auth";
+import {getToken, getUser} from "@/util/auth";
 import store from "@/store/store";
 import {checkTokenValid} from "@/api/user";
 
@@ -35,12 +35,12 @@ router.beforeEach((to, from, next) => {
     if (meta.isAuth !== true) {
         next();
     } else {
-        const token = getToken();
-        if ('' === token || undefined === token) {
+        const token = getToken(), user = getUser();
+        if ('' === token || undefined === token || '' === user || undefined === user) {
             next({path: '/login'});
             return;
         }
-        checkTokenValid(token).then(res => {
+        checkTokenValid(user, token).then(res => {
             if (res.ok && store.getters.token.length > 0) {
                 next();
             } else {

src/store/modules/user.js

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

src/util/auth.js

@@ -1,8 +1,23 @@
 import Cookies from 'js-cookie'
 
+const UserKey = 'x-access-user';
 const TokenKey = 'x-access-token';
+
+// 120分钟，120 * 60 * 1000
 const inFifteenMinutes = new Date(new Date().getTime() + 120 * 60 * 1000);
 
+export function getUser() {
+    return Cookies.get(UserKey);
+}
+
+export function setUser(user) {
+    return Cookies.set(UserKey, user, {expires: inFifteenMinutes});
+}
+
+export function removeUser() {
+    return Cookies.remove(UserKey);
+}
+
 export function getToken() {
     return Cookies.get(TokenKey);
 }
@@ -13,4 +28,4 @@ export function setToken(token) {
 
 export function removeToken() {
     return Cookies.remove(TokenKey);
-}
+}

src/views/login/Login.vue

@@ -89,9 +89,13 @@
                             text: '登录中,请稍后。。。',
                             spinner: "el-icon-loading"
                         });
-                        this.$store.dispatch("GenerateToken", this.loginForm).then(() => {
-                            this.$router.push({path: '/'});
-                            setTimeout(() => loading.close(), 500);
+                        this.$store.dispatch("GenerateSalt", this.loginForm.name).then((salt) => {
+                            this.$store.dispatch("GenerateToken", {salt, user:this.loginForm}).then(() => {
+                                this.$router.push({path: '/'});
+                                setTimeout(() => loading.close(), 500);
+                            }).catch(() => {
+                                loading.close()
+                            });
                         }).catch(() => {
                             loading.close()
                         });