登录完善

chuanyi_client/package-lock.json

@@ -15,6 +15,7 @@
         "font-awesome": "^4.7.0",
         "js-cookie": "^3.0.1",
         "jsencrypt": "^3.2.1",
+        "nprogress": "^0.2.0",
         "sass": "^1.55.0",
         "sass-loader": "^13.1.0",
         "svg-sprite-loader": "^6.0.11",
@@ -8868,6 +8869,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
@@ -23049,6 +23055,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",

chuanyi_client/package.json

@@ -10,7 +10,7 @@
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps"
   },
-  "main": "main.js",
+  "main": "background.js",
   "dependencies": {
     "axios": "^0.27.2",
     "element-ui": "^2.15.10",
@@ -18,6 +18,7 @@
     "font-awesome": "^4.7.0",
     "js-cookie": "^3.0.1",
     "jsencrypt": "^3.2.1",
+    "nprogress": "^0.2.0",
     "sass": "^1.55.0",
     "sass-loader": "^13.1.0",
     "svg-sprite-loader": "^6.0.11",

chuanyi_client/src/api/user.js

@@ -26,6 +26,20 @@ export function login(userName, password, verifyCode, uid) {
 }
 
 /**
+ * 退出登录
+ * @returns {AxiosPromise}
+ */
+export function logout() {
+    return request({
+        url: '/user/userLoginOut',
+        headers: {
+            isToken: true
+        },
+        method: 'post'
+    })
+}
+
+/**
  * 获取公钥
  * @returns {AxiosPromise}
  */

chuanyi_client/src/components/HeaderMain/index.vue

@@ -1,35 +1,62 @@
 <template>
   <div>
-      <el-dropdown>
-        <div class="menu-userinfo">
-          <el-avatar shape="square" size="small" :src="avatar" @error="errorHandler">
-            <img :src="avatarDefault"/>
-          </el-avatar>
-          <span>admin</span>
-        </div>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>详细信息</el-dropdown-item>
-          <el-dropdown-item>修改密码</el-dropdown-item>
-          <el-dropdown-item>退出登录</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+    <el-dropdown>
+      <div class="menu-userinfo">
+        <el-avatar shape="square" size="small" :src="avatar" @error="errorHandler">
+          <img :src="avatarDefault"/>
+        </el-avatar>
+        <span>{{ userName }}</span>
+      </div>
+      <el-dropdown-menu slot="dropdown">
+        <!--          <el-dropdown-item>详细信息</el-dropdown-item>-->
+        <el-dropdown-item @click.native="updateUserPwd">修改密码</el-dropdown-item>
+        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
   </div>
 </template>
 
 <script>
 import avatarDefault from '@/assets/images/default.png'
+import {getUserName, getUserId, clearUserInfo} from "@/utils/auth";
+import {logout} from "@/api/user";
+import {Message} from "element-ui";
 
 export default {
   name: "HeaderMain",
   data() {
     return {
       avatarDefault: avatarDefault,
-      avatar: ''
+      avatar: '',
+      userName: getUserName(),
+      userId: getUserId()
     }
   },
   methods: {
     errorHandler() {
       return true
+    },
+    /**
+     * 修改密码
+     */
+    updateUserPwd() {
+      Message.success("敬请期待")
+    },
+    /**
+     * 退出登录
+     */
+    logout() {
+      this.$confirm('您确定要退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        logout().then(res => {
+          clearUserInfo()
+          location.href = '/index';
+        });
+      }).catch(() => {
+      });
     }
   }
 }
@@ -41,6 +68,7 @@ export default {
   cursor: pointer;
   display: flex;
   align-items: center;
+
   i {
     color: white;
   }

chuanyi_client/src/main.js

@@ -7,6 +7,7 @@ import '@/assets/styles/element-variables.scss'
 import 'font-awesome/css/font-awesome.css'
 import '@/assets/styles/index.scss'
 import '@/assets/icons'
+import '@/permission'
 
 import App from './App.vue'
 import router from './router'

chuanyi_client/src/router/index.js

@@ -26,15 +26,14 @@ const routes = [
         hidden: true
     },
     {
-        path: '/',
+        path: '/login',
         name: 'login',
         component: () => import('@/views/login'),
     },
     {
-        path: '/index',
+        path: '/',
         name: 'index',
         component: () => import('@/views/index'),
-        // redirect: 'index',
         children: [
             {
                 path: 'index',

chuanyi_client/src/utils/auth.js

@@ -1,15 +1,51 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'Admin-Token'
+const TOKEN_KEY = 'C_TOKEN', USER_ID_KEY = 'C_USER_ID', USER_NAME_KEY = 'C_USER_NAME'
 
 export function getToken() {
-    return Cookies.get(TokenKey)
+    return Cookies.get(TOKEN_KEY)
 }
 
 export function setToken(token) {
-    return Cookies.set(TokenKey, token)
+    return Cookies.set(TOKEN_KEY, token)
 }
 
 export function removeToken() {
-    return Cookies.remove(TokenKey)
+    return Cookies.remove(TOKEN_KEY)
 }
+
+export function getUserId() {
+    return Cookies.get(USER_ID_KEY)
+}
+
+export function setUserId(userId) {
+    return Cookies.set(USER_ID_KEY, userId)
+}
+
+export function removeUserId() {
+    return Cookies.remove(USER_ID_KEY)
+}
+
+export function getUserName() {
+    return Cookies.get(USER_NAME_KEY)
+}
+
+export function setUserName(userName) {
+    return Cookies.set(USER_NAME_KEY, userName)
+}
+
+export function removeUserName() {
+    return Cookies.remove(USER_NAME_KEY)
+}
+
+export function setUserInfo(user, token) {
+    setUserId(user.userId)
+    setUserName(user.userName)
+    setToken(token)
+}
+
+export function clearUserInfo() {
+    removeUserId()
+    removeUserName()
+    removeToken()
+}

chuanyi_client/src/utils/request.js

@@ -28,6 +28,7 @@ service.interceptors.request.use(config => {
     const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
     if (getToken() && !isToken) {
         config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+        config.headers['token'] = getToken()
     }
     // get请求映射params参数
     if (config.method === 'get' && config.params) {

chuanyi_client/src/views/login.vue

@@ -67,7 +67,8 @@ import Cookies from "js-cookie";
 import { encrypt } from '@/utils/jsencrypt'
 import errorCode from '@/utils/errorCode'
 import { login, getCode, getPublicKey } from '@/api/user';
-import {Message} from "element-ui";
+import { Message } from "element-ui";
+import { setUserInfo } from "@/utils/auth";
 
 export default {
   name: "Login",
@@ -148,37 +149,17 @@ export default {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true;
-          // if (this.loginForm.rememberMe) {
-          //   Cookies.set("username", this.loginForm.username, {expires: 30});
-          //   Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
-          //   Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
-          // } else {
-          //   Cookies.remove("username");
-          //   Cookies.remove("password");
-          //   Cookies.remove('rememberMe');
-          // }
-          // this.$store.dispatch("Login", this.loginForm).then(() => {
-          //   this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          // }).catch(() => {
-          //   this.loading = false;
-          //   if (this.captchaEnabled) {
-          //     this.getCode();
-          //   }
-          // });
-
           const pwd = encrypt(this.loginForm.password, this.publicKey)
-
-          login(this.loginForm.username.trim(), pwd, this.loginForm.code, this.loginForm.uid).then(result => {
-            console.log(result);
-            // this.$router.push({ path: this.redirect || "/index" });
-            // this.$router.push("/index");
+          login(this.loginForm.username.trim(), pwd, this.loginForm.code, this.loginForm.uid).then(res => {
+            console.log(res);
+            setUserInfo(res.data.user, res.data.token)
+            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
           }).catch((e) => {
             this.loading = false;
             if (this.captchaEnabled) {
               this.getCode();
             }
           })
-          // this.$router.push({ path: this.redirect || "/index" }).catch(()=>{});
         }
       });
     }