vue+springboot+mybatisplus 登录拦截器

idea新建springboot项目，内建vue模块

 

MySQL数据库

drop table if exists e_user;
create table e_user(
	id int(11) not null auto_increment primary key comment '',
	username varchar(255) default null comment '',
	password varchar(255) default null comment ''
) comment '用户表';

insert into e_user(username,password) values('admin','1234');
insert into e_user(username,password) values('sa','1234');

springboot

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.14</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.shrimpking</groupId>
    <artifactId>springboot-vue-test04</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-vue-test04</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.3.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter-test</artifactId>
            <version>2.3.1</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

application.properties

server.port=8089

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimeZone=UTC
spring.datasource.username=root
spring.datasource.password=mysql123

user.java

package com.shrimpking.pojo;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/25 9:14
 */
@Data
@TableName("e_user")
public class User
{
    private Integer id;
    @TableField("userName")
    private String userName;
    private String password;
}

userMapper.java

package com.shrimpking.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.shrimpking.pojo.User;
import org.apache.ibatis.annotations.Mapper;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/25 9:16
 */
@Mapper
public interface UserMapper extends BaseMapper<User>
{
}

UserService.java

package com.shrimpking.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.shrimpking.pojo.User;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/25 9:16
 */
public interface UserService extends IService<User>
{
}

UserServiceImpl.java

package com.shrimpking.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.shrimpking.mapper.UserMapper;
import com.shrimpking.pojo.User;
import com.shrimpking.service.UserService;
import org.springframework.stereotype.Service;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/25 9:17
 */
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService
{
}

UserController.java

package com.shrimpking.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.shrimpking.pojo.User;
import com.shrimpking.service.UserService;
import com.shrimpking.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/25 9:18
 */
@Controller
public class UserController
{
    @Autowired
    private UserService userService;

    @CrossOrigin
    @PostMapping("/login")
    @ResponseBody
    public Result login(@RequestBody User user)
    {
        String userName = user.getUserName();
        String password = user.getPassword();

        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUserName,userName);
        wrapper.eq(User::getPassword,password);
        User user1 = userService.getOne(wrapper);

        if(user1 == null){
            //没查到
            return new Result(400);
        }
        else
        {
            return new Result(200);
        }

    }
}

Result.java

package com.shrimpking.utils;

import lombok.AllArgsConstructor;
import lombok.Data;

/**
 * Created by IntelliJ IDEA.
 *
 * @Author : Shrimpking
 * @create 2023/8/25 9:18
 */
@Data
@AllArgsConstructor
public class Result
{
    private Integer code;
}

Vue

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from "axios";
import router from '@/router'
import store from '@/store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
axios.defaults.baseURL="http://localhost:8089";
Vue.prototype.$http = axios;
Vue.config.productionTip = false;

//登录拦截器
router.beforeEach( (to,from,next) =>{
  if(to.meta.requireAuth){
    if(store.state.user.username){
      next()
    }else{
      next({
        path:'/login',
        query:{redirectPath: to.fullPath}
      })
    }
  }else {
    next()
  }
});

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app');

app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

store index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
   state:{
       user:{
           username: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).username
       }
   },
    mutations:{
       login(state,user){
           state.user = user;
           window.localStorage.setItem('user',JSON.stringify(user))
       }
    }
});

router index.js

import Vue from 'vue'
import VueRouter from "vue-router";
import Login from "@/components/Login";
import AppIndex from "@/components/AppIndex";

Vue.use(VueRouter);

export default new VueRouter({
    mode:'history',
   routes:[
       {
           path:'/',
           redirect:'/login'
       },
       {
           path: '/login',
           name:'Login',
           component: Login
       },
       {
           path:'/index',
           name:'appIndex',
           component: AppIndex,
           meta:{
               requireAuth:true
           }
       }
   ]
});

appindex.vue

<template>
    <div>
        AppIndex
    </div>
</template>

<script>
    export default {
        name: "AppIndex"
    }
</script>

<style scoped>

</style>

login.vue

<template>
    <el-form>
        <h3>系统登录</h3>
        <el-form-item>
            <el-input type="text" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="doLogin">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "LoginPage",
        data(){
            return {
                loginForm:{
                    username:'admin',
                    password:'1234'
                }
            }
        },
        methods:{
            doLogin(){
                var _this = this;
                //console.log(this.$store.state);
                this.$http.post('/login',{
                    userName: this.loginForm.username,
                    password: this.loginForm.password
                }).then( responseResult => {
                    if(responseResult.data.code === 200){
                        _this.$store.commit('login',_this.loginForm);
                        var path = this.$route.query.redirectPath;
                        this.$router.replace({path: (path === '/' || path === undefined) ? '/index' : path})
                    }else {
                        alert('账号或密码错误');
                    }

                })
            }
        }
    }
</script>

<style scoped>

</style>