feat: register and logout

12766f35 · Evan · c1b5bbd8 · 12766f35 · 12766f35 · 12766f35
7 changed file
--- a/wj-vue/src/components/Login.vue
+++ b/wj-vue/src/components/Login.vue
@@ -14,7 +14,8 @@
      <el-checkbox class="login_remember" v-model="checked"
                   label-position="left"><span style="color: #505458">记住密码</span></el-checkbox>
      <el-form-item style="width: 100%">
-        <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
+        <el-button type="primary" style="width: 40%;background: #505458;border: none" v-on:click="login">登录</el-button>
+        <router-link to="register"><el-button type="primary" style="width: 40%;background: #505458;border: none">注册</el-button></router-link>
      </el-form-item>
    </el-form>
  </body>
@@ -24,13 +25,13 @@
    data () {
      return {
        rules: {
-          account: [{required: true, message: '请输入正确的用户名', trigger: 'blur'}],
-          checkPass: [{required: true, message: '请输入正确的密码', trigger: 'blur'}]
+          account: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
+          checkPass: [{required: true, message: '密码不能为空', trigger: 'blur'}]
        },
        checked: true,
        loginForm: {
-          username: 'admin',
-          password: '123'
+          username: '',
+          password: ''
        },
        loading: false
      }
@@ -66,7 +67,7 @@
    position: fixed;
  }
   body{
-     margin: 0px;
+     margin: -5px 0px;
   }
  .login-container {
    border-radius: 15px;

--- a/wj-vue/src/components/Register.vue
+++ b/wj-vue/src/components/Register.vue
+<template>
+  <body id="paper">
+  <el-form :rules="rules" class="login-container" label-position="left"
+           label-width="0px" v-loading="loading">
+    <h3 class="login_title">用户注册</h3>
+    <el-form-item>
+      <el-input type="text" v-model="loginForm.username"
+                auto-complete="off" placeholder="账号"></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-input type="password" v-model="loginForm.password"
+                auto-complete="off" placeholder="密码"></el-input>
+    </el-form-item>
+    <el-form-item style="width: 100%">
+      <el-button type="primary" style="width: 40%;background: #505458;border: none" v-on:click="register">注册</el-button>
+    </el-form-item>
+  </el-form>
+  </body>
+</template>
+<script>
+  export default{
+    data () {
+      return {
+        checked: true,
+        loginForm: {
+          username: '',
+          password: ''
+        },
+        loading: false
+      }
+    },
+    methods: {
+      register () {
+        var _this = this
+        this.$axios
+          .post('/register', {
+            username: this.loginForm.username,
+            password: this.loginForm.password
+          })
+          .then(resp => {
+            if (resp.data.code === 200) {
+              this.$alert('注册成功', '提示', {
+                confirmButtonText: '确定'
+              })
+              _this.$router.replace('/login')
+            } else {
+              this.$alert(resp.data.message, '提示', {
+                confirmButtonText: '确定'
+              })
+            }
+          })
+          .catch(failResponse => {})
+      }
+    }
+  }
+</script>
+<style>
+  #paper {
+    background:url("../assets/img/bg/eva1.jpg") no-repeat;
+    background-position: center;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    position: fixed;
+  }
+  body{
+    margin: -5px 0px;
+  }
+  .login-container {
+    border-radius: 15px;
+    background-clip: padding-box;
+    margin: 90px auto;
+    width: 350px;
+    padding: 35px 35px 15px 35px;
+    background: #fff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0 25px #cac6c6;
+  }
+  .login_title {
+    margin: 0px auto 40px auto;
+    text-align: center;
+    color: #505458;
+  }
+  .login_remember {
+    margin: 0px 0px 35px 0px;
+    text-align: left;
+  }
+  /*.login_button {*/
+  /*background: #505458;*/
+  /*}*/
+  /*el_checkbox {*/
+  /*background: #505458;*/
+  /*}*/
+</style>
--- a/wj-vue/src/components/common/NavMenu.vue
+++ b/wj-vue/src/components/common/NavMenu.vue
@@ -12,8 +12,7 @@
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
-      <a href="#nowhere" style="color: #222;float: right;padding: 20px;">更多功能</a>
-      <i class="el-icon-menu" style="float:right;font-size: 45px;color: #222;padding-top: 8px"></i>
+      <i class="el-icon-switch-button" v-on:click="logout" style="float:right;font-size: 40px;color: #222;padding: 10px"></i>
      <span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">White Jotter - Your Mind Palace</span>
      <el-input
        placeholder="快速搜索..."
@@ -48,6 +47,17 @@
    methods: {
      handleSelect (key, keyPath) {
        console.log(key, keyPath)
+      },
+
+      logout () {
+        var _this = this
+        this.$axios.get('/logout').then(resp => {
+          if (resp.data.code === 200) {
+            // 登出操作前后端应保持一致
+            _this.$store.commit('logout')
+            _this.$router.replace('/login')
+          }
+        }).catch(failResponse => {})
      }
    }
  }
@@ -61,4 +71,10 @@
  span {
    pointer-events: none;
  }
+
+  .el-icon-switch-button {
+    cursor: pointer;
+    /*去除点击时的框线*/
+    outline:0;
+  }
 </style>
--- a/wj-vue/src/router/index.js
+++ b/wj-vue/src/router/index.js
@@ -7,6 +7,7 @@ import LibraryIndex from '../components/library/LibraryIndex'
 import Login from '../components/Login'
 import Home from '../components/Home'
 import AdminIndex from '../components/admin/AdminIndex'
+import Register from '../components/Register'

 Vue.use(Router)

@@ -68,6 +69,11 @@ export default new Router({
      name: 'Login',
      component: Login
    },
+    {
+      path: '/register',
+      name: 'Register',
+      component: Register
+    },
    {
      path: '/admin',
      name: 'Admin',

--- a/wj-vue/src/store/index.js
+++ b/wj-vue/src/store/index.js
@@ -20,6 +20,7 @@ export default new Vuex.Store({
    login (state, user) {
      state.user = user
      window.localStorage.setItem('user', JSON.stringify(user))
+      console.log(user)
    },
    logout (state) {
      window.localStorage.removeItem('user')

--- a/wj/src/main/java/com/gm/wj/controller/LoginController.java
+++ b/wj/src/main/java/com/gm/wj/controller/LoginController.java
@@ -6,8 +6,12 @@ import com.gm.wj.pojo.User;
 import com.gm.wj.result.Result;
 import com.gm.wj.result.ResultFactory;
 import com.gm.wj.service.UserService;
+import org.apache.shiro.SecurityUtils;
+import org.apache.shiro.authc.AuthenticationException;
+import org.apache.shiro.authc.UsernamePasswordToken;
 import org.apache.shiro.crypto.SecureRandomNumberGenerator;
 import org.apache.shiro.crypto.hash.SimpleHash;
+import org.apache.shiro.subject.Subject;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.*;
@@ -25,18 +29,22 @@ public class LoginController {
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

-        User user = userService.get(username, requestUser.getPassword());
-        if (null == user) {
-            String message = "账号密码错误";
-            return ResultFactory.buildFailResult(message);
-        } else {
+        Subject subject = SecurityUtils.getSubject();
+        UsernamePasswordToken token = new UsernamePasswordToken(username, requestUser.getPassword());
+        try {
+            subject.login(token);
+            User user = userService.getByName(username);
            session.setAttribute("user", user);
            return ResultFactory.buildSuccessResult(user);
+        } catch (AuthenticationException e) {
+            String message = "账号密码错误";
+            return ResultFactory.buildFailResult(message);
        }
    }

    @PostMapping("api/register")
-    public Object register(@RequestBody User user) {
+    @ResponseBody
+    public Result register(@RequestBody User user) {
        String username = user.getUsername();
        String password = user.getPassword();
        username = HtmlUtils.htmlEscape(username);
@@ -61,4 +69,15 @@ public class LoginController {

        return ResultFactory.buildSuccessResult(user);
    }
+
+    @ResponseBody
+    @GetMapping("api/logout")
+    public Result logout() {
+        Subject subject = SecurityUtils.getSubject();
+        if (subject.isAuthenticated()) {
+            subject.logout();
+        }
+        String message = "成功登出";
+        return ResultFactory.buildSuccessResult(message);
+    }
 }
--- a/wj/src/main/java/com/gm/wj/interceptor/LoginInterceptor.java
+++ b/wj/src/main/java/com/gm/wj/interceptor/LoginInterceptor.java
@@ -3,6 +3,8 @@ package com.gm.wj.interceptor;

 import com.gm.wj.pojo.User;
 import org.apache.commons.lang.StringUtils;
+import org.apache.shiro.SecurityUtils;
+import org.apache.shiro.subject.Subject;
 import org.springframework.web.servlet.HandlerInterceptor;
 import org.springframework.web.servlet.ModelAndView;

@@ -29,9 +31,10 @@ public class LoginInterceptor  implements HandlerInterceptor{
        uri = StringUtils.remove(uri, contextPath+"/");
        String page = uri;

+        // 使用 shiro，仅对后端拦截有效
        if(begingWith(page, requireAuthPages)){
-            User user = (User) session.getAttribute("user");
-            if(user==null) {
+            Subject subject = SecurityUtils.getSubject();
+            if(!subject.isAuthenticated()) {
                httpServletResponse.sendRedirect("login");
                return false;
            }