若依+vue2实现模拟登录

1、背景

第三方通过链接访问若依项目，该链接通过携带唯一标识符：phone（手机号），项目通过手机号查询本项目数据库人员信息实现模拟登录。

2、实现

2.1. 前端实现

2.1.1 创建专用模拟登录页面PhoneLogin.vue

html 复制代码

<template>
  <div class="phone-login-container">
    <div v-if="loading">正在登录中...</div>
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>

<script>
import { simulateLogin } from '@/api/login'
import { removeToken, setToken } from '@/utils/auth'

export default {
  name: 'PhoneLogin',
  data() {
    return {
      loading: true,
      error: ''
    }
  },
  created() {
    this.handlePhoneLogin()
  },
  methods: {
    async handlePhoneLogin() {
      // 先清除旧账号的所有信息
      await this.$store.dispatch('LogOut')
      removeToken()

      const phone = this.$route.query.phone
      if (!phone) {
        this.error = '请提供手机号参数'
        this.loading = false
        return
      }

      try {
        // 发起模拟登录请求
        const response = await simulateLogin(phone)
        const  token  = response.data.token

        if (!token) {
          throw new Error('未能获取有效token')
        }

        // 存储新token
        setToken(token)

        // 获取新用户信息
        await this.$store.dispatch('GetInfo')

        // 清除可能的路由缓存
        this.$router.app.$options.router.matcher = this.$router.app.$options.router.matcher

        // 跳转到首页
        this.$router.push({ path: '/' })
      } catch (error) {
        console.error('手机号登录失败:', error)
        this.error = '登录失败: ' + (error.message || '未知错误')
        this.loading = false
      }
    }
  }
}
</script>

2.1.2 添加模拟登录API

在 api/login.js 中添加：

html 复制代码

// 模拟登录API
export function simulateLogin(phone) {
  return request({
    url: '/auth/simulate-login?phone'+phone,
    method: 'get'
  });
}

2.1.3 添加白名单

src/permission.js中添加：

html 复制代码

const whiteList = ['/login', '/register',"/phoneLogin"]

2.1.4 添加路由

在router/index.js中添加跳转路由

html 复制代码

{
    path: '/phoneLogin',
    component: () => import('@/views/stationRule/phoneLogin'),
    hidden: true,
    meta: {
      title: '手机号登录',
      noAuth: true // 关键！设置为不需要认证
    }
  },

2.1.5 修改全局权限控制

在 src/permission.js 中确保允许访问该路由：

javascript 复制代码

router.beforeEach(async (to, from, next) => {
  // 获取token
  const hasToken = getToken()
  
  // 如果是phoneLogin路由，直接放行
  if (to.path === '/phoneLogin') {
    next()
    return
  }
  
  // ...原有其他逻辑
}

2.2后端实现

2.2.1在 ruoyi-admin 模块中创建控制器SimulateAuthController

java 复制代码

@RestController
@RequestMapping("/auth")
public class SimulateAuthController extends BaseController {

    @Autowired
    private ISimulateLoginService simulateLoginService;
    @Autowired
    private TokenService tokenService;

    @GetMapping("/simulate-login")
    public AjaxResult simulateLogin(@RequestParam("phone") String phone, HttpServletRequest request) {
        if (StringUtils.isEmpty(phone)) {
            return AjaxResult.error("手机号不能为空");
        }

        // 使旧token失效
        String oldToken = tokenService.getToken(request);
        if (StringUtils.isNotEmpty(oldToken)) {
            tokenService.delLoginUser(oldToken);
        }

        return simulateLoginService.simulateLoginByPhone(phone);
    }
}

2.2.1创建服务接口和实现

java 复制代码

public interface ISimulateLoginService {
    AjaxResult simulateLoginByPhone(String phone);
}

@Service
public class SimulateLoginServiceImpl implements ISimulateLoginService {
    
    @Autowired
    private TokenService tokenService;
    
    @Override
    public AjaxResult simulateLoginByPhone(String phone) {
        // 根据user数据库查询用户，在UserMapper中添加查询方法
        SysUser user = sysUserMapper.selectUserByPhone(phone);
        if (user == null) {
            return AjaxResult.error("用户不存在");
        }
        
        // 创建token
        LoginUser loginUser = new LoginUser();
        loginUser.setUser(user);
        loginUser.setPermissions(permissionService.getMenuPermission(user));
        loginUser.setRoles(roleService.selectRoleKeys(user.getUserId()));
        
        String token = tokenService.createToken(loginUser);
        
        // 返回token和用户信息
        Map<String, Object> result = new HashMap<>();
        result.put("token", token);
        result.put("user", user);
        
        return AjaxResult.success(result);
    }
}

3. 安全配置

3.1 添加白名单

在 SecurityConfig.java 中添加模拟登录接口到白名单：

java 复制代码

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity
        // ...其他配置
        .authorizeRequests()
        // 放行模拟登录接口
        .antMatchers("/auth/simulate-login").anonymous()
        // ...其他放行配置
}

4.访问

直接访问 http://localhost:8080?phone=13800138000

成功跳转并可以访问其他链接