完成登录退出操作

2023-04-10 18:58:08 +08:00 · 2023-04-10 18:58:08 +08:00 · 18f5fc9661
commit 18f5fc9661
parent 9cfe561071
7 changed files with 95 additions and 29 deletions
--- a/study-project-backend/src/main/java/com/example/config/SecurityConfiguration.java
+++ b/study-project-backend/src/main/java/com/example/config/SecurityConfiguration.java
@ -42,6 +42,7 @@ public class SecurityConfiguration {
                .and()
                .logout()
                .logoutUrl("/api/auth/logout")
+                .logoutSuccessHandler(this::onAuthenticationSuccess)
                .and()
                .csrf()
                .disable()
@ -54,6 +55,18 @@ public class SecurityConfiguration {
                .build();
    }

+    private CorsConfigurationSource corsConfigurationSource() {
+        CorsConfiguration cors = new CorsConfiguration();
+        cors.addAllowedOriginPattern("*");
+        cors.setAllowCredentials(true);
+        cors.addAllowedHeader("*");
+        cors.addAllowedMethod("*");
+        cors.addExposedHeader("*");
+        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
+        source.registerCorsConfiguration("/**", cors);
+        return source;
+    }
+
    @Bean
    public AuthenticationManager authenticationManager(HttpSecurity security) throws Exception {
        return security
@ -68,21 +81,12 @@ public class SecurityConfiguration {
        return new BCryptPasswordEncoder();
    }

-    private CorsConfigurationSource corsConfigurationSource(){
-        CorsConfiguration cors = new CorsConfiguration();
-        cors.addAllowedOriginPattern("*");
-        cors.setAllowCredentials(true);
-        cors.addAllowedMethod("*");
-        cors.addAllowedHeader("*");
-        cors.addExposedHeader("*");
-        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
-        source.registerCorsConfiguration("/**", cors);
-        return source;
-    }
-
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException {
        response.setCharacterEncoding("utf-8");
-        response.getWriter().write(JSONObject.toJSONString(RestBean.success("登录成功")));
+        if(request.getRequestURI().endsWith("/login"))
+            response.getWriter().write(JSONObject.toJSONString(RestBean.success("登录成功")));
+        else if(request.getRequestURI().endsWith("/logout"))
+            response.getWriter().write(JSONObject.toJSONString(RestBean.success("退出登录成功")));
    }

    public void onAuthenticationFailure(HttpServletRequest request, HttpServletResponse response, AuthenticationException exception) throws IOException {
--- a/study-project-frontend/package-lock.json
+++ b/study-project-frontend/package-lock.json
@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "@element-plus/icons-vue": "^2.1.0",
+        "axios": "^1.3.5",
        "element-plus": "^2.3.3",
        "pinia": "^2.0.32",
        "vue": "^3.2.47",
@ -734,14 +735,12 @@
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "peer": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "node_modules/axios": {
      "version": "1.3.5",
      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.3.5.tgz",
      "integrity": "sha512-glL/PvG/E+xCWwV8S6nCHcrfg1exGx7vxyUIivIA1iL7BIh6bePylCfVHwp6k13ao7SATxB6imau2kqY+I67kw==",
-      "peer": true,
      "dependencies": {
        "follow-redirects": "^1.15.0",
        "form-data": "^4.0.0",
@ -809,7 +808,6 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "peer": true,
      "dependencies": {
        "delayed-stream": "~1.0.0"
      },
@ -848,7 +846,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "peer": true,
      "engines": {
        "node": ">=0.4.0"
      }
@ -975,7 +972,6 @@
      "version": "1.15.2",
      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "peer": true,
      "engines": {
        "node": ">=4.0"
      },
@ -989,7 +985,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "peer": true,
      "dependencies": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.8",
@ -1168,7 +1163,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "peer": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -1177,7 +1171,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "peer": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@ -1337,8 +1330,7 @@
    "node_modules/proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "peer": true
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
--- a/study-project-frontend/package.json
+++ b/study-project-frontend/package.json
@ -9,6 +9,7 @@
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
+    "axios": "^1.3.5",
    "element-plus": "^2.3.3",
    "pinia": "^2.0.32",
    "vue": "^3.2.47",
--- a/study-project-frontend/src/components/welcome/LoginPage.vue
+++ b/study-project-frontend/src/components/welcome/LoginPage.vue
@ -5,12 +5,12 @@
            <div style="font-size: 14px;color: grey">在进入系统之前请先输入用户名和密码进行登录</div>
        </div>
        <div style="margin-top: 50px">
-            <el-input type="text" placeholder="用户名/邮箱">
+            <el-input v-model="form.username" type="text" placeholder="用户名/邮箱">
                <template #prefix>
                    <el-icon><User /></el-icon>
                </template>
            </el-input>
-            <el-input type="password" style="margin-top: 10px" placeholder="密码">
+            <el-input v-model="form.password" type="password" style="margin-top: 10px" placeholder="密码">
                <template #prefix>
                    <el-icon><Lock /></el-icon>
                </template>
@ -18,14 +18,14 @@
        </div>
        <el-row style="margin-top: 5px">
            <el-col :span="12" style="text-align: left">
-                <el-checkbox v-model="checked1" label="记住我"/>
+                <el-checkbox v-model="form.remember" label="记住我"/>
            </el-col>
            <el-col :span="12" style="text-align: right">
                <el-link>忘记密码？</el-link>
            </el-col>
        </el-row>
        <div style="margin-top: 40px">
-            <el-button style="width: 270px" type="success" plain>立即登录</el-button>
+            <el-button @click="login()" style="width: 270px" type="success" plain>立即登录</el-button>
        </div>
        <el-divider>
            <span style="color: grey;font-size: 13px">没有账号</span>
@ -38,6 +38,31 @@

 <script setup>
 import {User, Lock} from '@element-plus/icons-vue'
+import {reactive} from "vue";
+import {ElMessage} from "element-plus";
+import {post} from "@/net";
+import router from "@/router";
+
+const form = reactive({
+    username: '',
+    password: '',
+    remember: false
+})
+
+const login = () => {
+    if(!form.username || !form.password) {
+        ElMessage.warning('请填写用户名和密码！')
+    } else {
+        post('/api/auth/login', {
+            username: form.username,
+            password: form.password,
+            remember: form.remember
+        }, (message) => {
+            ElMessage.success(message)
+            router.push('/index')
+        })
+    }
+}
 </script>

 <style scoped>
--- a/study-project-frontend/src/main.js
+++ b/study-project-frontend/src/main.js
@ -5,9 +5,12 @@ import App from './App.vue'
 import router from './router'

 import 'element-plus/dist/index.css'
+import axios from "axios";

 const app = createApp(App)

+axios.defaults.baseURL = 'http://localhost:8080'
+
 app.use(createPinia())
 app.use(router)

--- a/study-project-frontend/src/net/index.js
+++ b/study-project-frontend/src/net/index.js
@ -0,0 +1,32 @@
+import axios from "axios";
+import {ElMessage} from "element-plus";
+
+const defaultError = () => ElMessage.error('发生了一些错误，请联系管理员')
+const defaultFailure = (message) => ElMessage.warning(message)
+
+function post(url, data, success, failure = defaultFailure, error = defaultError) {
+    axios.post(url, data, {
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        withCredentials: true
+    }).then(({data}) => {
+        if(data.success)
+            success(data.message, data.status)
+        else
+            failure(data.message, data.status)
+    }).catch(error)
+}
+
+function get(url, success, failure = defaultFailure, error = defaultError) {
+    axios.get(url, {
+        withCredentials: true
+    }).then(({data}) => {
+        if(data.success)
+            success(data.message, data.status)
+        else
+            failure(data.message, data.status)
+    }).catch(error)
+}
+
+export { get, post }
--- a/study-project-frontend/src/views/IndexView.vue
+++ b/study-project-frontend/src/views/IndexView.vue
@ -3,12 +3,21 @@
      欢迎进入到学习平台
  </div>
  <div>
-      <el-button type="danger" plain>退出登录</el-button>
+      <el-button @click="logout()" type="danger" plain>退出登录</el-button>
  </div>
 </template>

 <script setup>
+import {get} from "@/net";
+import {ElMessage} from "element-plus";
+import router from "@/router";

+const logout = () => {
+    get('/api/auth/logout', (message) => {
+        ElMessage.success(message)
+        router.push('/')
+    })
+}
 </script>

 <style scoped>