若依+vue2实现模拟登录

1、背景

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

2、实现

2.1. 前端实现

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

<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.phoneif (!phone) {this.error = '请提供手机号参数'this.loading = falsereturn}try {// 发起模拟登录请求const response = await simulateLogin(phone)const  token  = response.data.tokenif (!token) {throw new Error('未能获取有效token')}// 存储新tokensetToken(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 中添加：

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

2.1.3 添加白名单

src/permission.js中添加：

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

2.1.4 添加路由

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

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

2.1.5 修改全局权限控制

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

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

2.2后端实现

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

@RestController
@RequestMapping("/auth")
public class SimulateAuthController extends BaseController {@Autowiredprivate ISimulateLoginService simulateLoginService;@Autowiredprivate 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创建服务接口和实现

public interface ISimulateLoginService {AjaxResult simulateLoginByPhone(String phone);
}@Service
public class SimulateLoginServiceImpl implements ISimulateLoginService {@Autowiredprivate TokenService tokenService;@Overridepublic AjaxResult simulateLoginByPhone(String phone) {// 根据user数据库查询用户，在UserMapper中添加查询方法SysUser user = sysUserMapper.selectUserByPhone(phone);if (user == null) {return AjaxResult.error("用户不存在");}// 创建tokenLoginUser 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 中添加模拟登录接口到白名单：

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