springboot+mybatisplus+vue实现登录验证成功后跳转至主页面

首先，你需要在后端编写一个登录验证接口，接收前端传来的用户名和密码，进行验证后返回一个 token。可以使用 Spring Security 框架进行安全认证。

在前端，你需要编写一个登录页面，使用 Vue.js 编写表单，将用户输入的用户名和密码传递给后端。当后端返回 token 后，你需要将其保存到前端的 sessionStorage 或 localStorage 中，以便后续的请求可以带上这个 token。

接着，你需要编写一个路由守卫，在用户访问主页面时进行 token 的验证。如果 token 不存在或者无效，就将用户重定向到登录页面。如果 token 有效，就将用户展示主页面。

在前端，你可以使用 Vue Router 来实现路由守卫。在后端，你可以使用拦截器来实现 token 的验证。下面是一个简单的示例代码：

后端登录接口：

@RestController
@RequestMapping("/api")
public class LoginController {
    @PostMapping("/login")
    public Result login(@RequestBody User user) {
        // 进行登录验证，返回 token
        String token = doLogin(user.getUsername(), user.getPassword());
        return Result.success(token);
    }
}

前端登录页面：

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="handleSubmit">
      <div>
        <label>Username:</label>
        <input type="text" v-model="username" />
      </div>
      <div>
        <label>Password:</label>
        <input type="password" v-model="password" />
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async handleSubmit() {
      // 发送登录请求
      const { data } = await axios.post('/api/login', {
        username: this.username,
        password: this.password,
      });

      // 保存 token
      sessionStorage.setItem('token', data);
      this.$router.push('/main');
    },
  },
};
</script>

前端路由守卫：

router.beforeEach((to, from, next) => {
  const token = sessionStorage.getItem('token');

  if (to.name === 'Login') {
    // 如果是访问登录页面，就直接进入
    next();
  } else {
    if (!token) {
      // 如果 token 不存在，就重定向到登录页面
      next({ name: 'Login' });
    } else {
      // 如果 token 存在，就进入下一个路由
      next();
    }
  }
});

后端拦截器：

@Component
public class AuthenticationInterceptor extends HandlerInterceptorAdapter {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("Authorization");
        if (token == null || !verifyToken(token)) {
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            return false;
        }
        return true;
    }
}

最后，你需要编写一个主页面，展示用户的信息和功能。当用户点击退出按钮时，你需要清除保存在前端的 token，并将用户重定向到登录页面。