实现根据登录不同角色跳转至对应界面（springboot+vue的家教平台项目）

一.概述

项目中有三种不同角色，分别是管理员，教师，家长。现在要实现在登录时根据不同的角色跳转至不同的界面。

二.思路分析

1. 后端确认角色信息

• 角色验证：确保后端在登录成功后，将用户的角色信息包含在响应中。这意味着除了返回基本的用户信息（如用户名、头像等），还需要明确返回用户的角色。
• 安全性：确保角色信息在传输过程中是安全的，避免被篡改。

2. 前端处理登录响应

• 接收角色信息：在前端登录方法中，接收并存储来自后端的角色信息。这可以存储在 localStorage、Vuex 状态管理中，或者组件的 data 中。
• 判断角色：根据接收到的角色信息，确定用户应当被重定向到哪个页面。

3. 设置路由

• 定义不同的路由：在前端路由配置中，为不同的角色定义不同的路由路径和组件。例如，管理员可能跳转到 /admin/dashboard，教师跳转到 /teacher/home，家长跳转到 /parent/home。
• 动态路由跳转：在登录成功后，根据用户的角色动态地选择要跳转的路由。

三.后端代码编写：

在后端中成功登录时会返回一个user对象，这个对象中就包括了角色的属性值，由前端接收并进行判断跳转。

public ResponseEntity<ApiResponse<?>> login(@RequestBody LoginRequest loginRequest) {
        User user = userService.selectByPhone2(loginRequest.getPhoneNumber());
        if (user != null && userService.checkPassword(loginRequest.getPassword(), user.getUserPassword())) {
            if (user.getUserRole().equals(loginRequest.getRole())){
                return ResponseEntity.ok(ApiResponse.success("登录成功",user));
            }else {
                return ResponseEntity.status(401).body(ApiResponse.error("角色不匹配"));
            }
        } else {
            return ResponseEntity.status(401).body(ApiResponse.error("登录失败,密码错误"));
        }
    }

四.前端代码编写

在登录的方法中获取对象名，对象图片及对象角色，根据角色的判断跳转至不同的界面

async login() {
      try {
        const response = await axios.post('http://localhost:8081/api/auth/login', {
          phoneNumber: this.phoneNumber,
          password: this.password,
          role:this.role
        });

        if (response.data.success) {
          this.$message.success("登录成功")
          // 将数据存储在 localStorage 中
          localStorage.setItem('userPicture', response.data.data.userPicture);
          localStorage.setItem('userName', response.data.data.userName);
          localStorage.setItem('userRole', response.data.data.userRole);

          const userRole = response.data.data.userRole;
          if (userRole === '管理员') {
            this.$router.push({ name: 'Home' });
          } else if (userRole === '教师') {
            this.$router.push({ name: 'Teacher' });
          } else if (userRole === '家长') {
            this.$router.push({ name: 'Parent' });
          }
        } else {
          this.errorMessage = response.data.message;
        }
      } catch (error) {
        this.$message.error("登录失败")
        this.errorMessage = '登录失败，请检查账号、密码以及角色';
      }
    },

五.在index.js中要编写对应的界面跳转代码

{
        path: '/teacher',
        name: 'Teacher',
        component: Teacher,  // 注册页面的路由配置
    },
    {
        path: '/parent',
        name: 'Parent',
        component: Parent,  // 注册页面的路由配置
    },