若依实现第三方登录通用方法——手机号登录测试
1. 新增LoginAuthenticationToken类，继承AbstractAuthenticationToken
这个直接复制就好了，更换包名，其他不用进行修改
package com.ruoyi.framework.handler;
import org.springframework.security.authentication.AbstractAuthenticationToken;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.util.Assert;
import java.util.Collection;
public class LoginAuthenticationToken extends AbstractAuthenticationToken {
private static final long serialVersionUID = 550L;
private final Object principal;
private Object credentials;
public LoginAuthenticationToken(Object principal, Object credentials) {
super((Collection) null);
this.principal = principal;
this.credentials = credentials;
this.setAuthenticated(false);
}
public LoginAuthenticationToken(Object principal, Object credentials, Collection<? extends GrantedAuthority> authorities) {
super(authorities);
this.principal = principal;
this.credentials = credentials;
super.setAuthenticated(true);
}
public Object getCredentials() {
return this.credentials;
}
public Object getPrincipal() {
return this.principal;
}
public void setAuthenticated(boolean isAuthenticated) throws IllegalArgumentException {
Assert.isTrue(!isAuthenticated, "Cannot set this token to trusted - use constructor which takes a GrantedAuthority list instead");
super.setAuthenticated(false);
}
public void eraseCredentials() {
super.eraseCredentials();
this.credentials = null;
}
}
2. 创建LoginAuthenticationProvider类，继承AuthenticationProvider
这个直接复制就好了，更换包名，其他不用进行修改
package com.ruoyi.framework.handler;
import lombok.extern.log4j.Log4j2;
import org.springframework.security.authentication.AuthenticationProvider;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.AuthenticationException;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
@Log4j2
public class LoginAuthenticationProvider implements AuthenticationProvider {
private UserDetailsService userDetailsService;
public LoginAuthenticationProvider(UserDetailsService userDetailsService) {
setUserDetailsService(userDetailsService);
}
/**
* 重写authentication方法，实现身份验证逻辑
*/
@Override
public Authentication authenticate(Authentication authentication) throws AuthenticationException {
LoginAuthenticationToken authenticationToken = (LoginAuthenticationToken) authentication;
String phone = (String) authenticationToken.getPrincipal();
String loginType = (String) authenticationToken.getCredentials();
//委托 UserDetailsService 查找系统用户
UserDetails userDetails = userDetailsService.loadUserByUsername(phone);
//鉴权成功,返回一个拥有鉴权的AbstractAuthenticationToken
LoginAuthenticationToken authenticationTokenRes = new LoginAuthenticationToken(userDetails, userDetails.getAuthorities());
authenticationTokenRes.setDetails(authenticationToken.getDetails());
return authenticationTokenRes;
}
/**
* 重写supports方法，指定此AuthenticationProvider 仅支持短信验证码身份验证
*/
@Override
public boolean supports(Class<?> authentication) {
return LoginAuthenticationToken.class.isAssignableFrom(authentication);
}
public UserDetailsService getUserDetailsService() {
return userDetailsService;
}
public void setUserDetailsService(UserDetailsService userDetailsService) {
this.userDetailsService = userDetailsService;
}
}
3. 创建UserDetailsByOtherLoginServiceImpl实现类，直接复制不用改
位置：com.ruoyi.framework.web.service
重点：@Service(“userDetailsByOtherLogin”) 注解别忘了
package com.ruoyi.framework.web.service;
import com.ruoyi.common.core.domain.entity.SysUser;
import com.ruoyi.common.core.domain.model.LoginUser;
import com.ruoyi.common.enums.UserStatus;
import com.ruoyi.common.exception.ServiceException;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.system.service.ISysUserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;
/**
* 用户验证处理
*
* @author yizhi
*/
@Service("userDetailsByOtherLogin")
public class UserDetailsByOtherLoginServiceImpl implements UserDetailsService {
private static final Logger log = LoggerFactory.getLogger(UserDetailsByOtherLoginServiceImpl.class);
@Autowired
private ISysUserService userService;
@Autowired
private SysPermissionService permissionService;
@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
SysUser user = userService.selectUserByUserName(username);
if (StringUtils.isNull(user)) {
log.info("登录用户：{} 不存在.", username);
throw new ServiceException("登录用户：" + username + " 不存在");
} else if (UserStatus.DELETED.getCode().equals(user.getDelFlag())) {
log.info("登录用户：{} 已被删除.", user.getUserName());
throw new ServiceException("对不起，您的账号：" + user.getUserName() + " 已被删除");
} else if (UserStatus.DISABLE.getCode().equals(user.getStatus())) {
log.info("登录用户：{} 已被停用.", user.getUserName());
throw new ServiceException("对不起，您的账号：" + user.getUserName() + " 已停用");
}
return createLoginUser(user);
}
public UserDetails createLoginUser(SysUser user) {
return new LoginUser(user.getUserId(), user.getDeptId(), user, permissionService.getMenuPermission(user));
}
}
4. 修改UserDetailsServiceImpl实现类，添加@Service(“userDetailsByPassword”)注解
位置：package com.ruoyi.framework.web.service
5. 修改SecurityConfig文件，修改后3和4才会生效
位置：com.ruoyi.framework.config
原有的userDetailsService上面添加个注解 @Qualifier(“userDetailsByPassword”) ：这个是用来对应4的@Service(“userDetailsByPassword”) 注解的
添加userDetailsByOtherLoginService并在上面添加注解@Qualifier(“userDetailsByOtherLogin”)：这个是用来对应3的@Service(“userDetailsByOtherLogin”)
身份认证接口上添加其他登录方式的验证，具体代码见下方
package com.ruoyi.framework.config;
/**
* spring security配置
*
* @author ruoyi
*/
@EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
/**
* 自定义用户认证逻辑
*/
@Autowired
@Qualifier("userDetailsByPassword")
private UserDetailsService userDetailsService;
/**
* 自定义用户认证逻辑
*/
@Autowired
@Qualifier("userDetailsByOtherLogin")
private UserDetailsService userDetailsByOtherLoginService;
==================================
没有修改的地方省略了
==================================
/**
* 身份认证接口
*/
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
//其他登录方式的验证
auth.authenticationProvider(new LoginAuthenticationProvider(userDetailsByOtherLoginService));
//账号密码的验证
auth.userDetailsService(userDetailsService).passwordEncoder(bCryptPasswordEncoder());
}
}
到此第三方登录的配置就完成了，接下来我们创建策略模式+工厂模式，简化后续接入其他第三方代码的成本
1. 创建工厂类
package com.ruoyi.framework.handler;
/**
* 定义上下文
*
* @author yizhi
*/
@Component
public class LoginContext implements InitializingBean, ApplicationContextAware {
private ApplicationContext appContext;
private final Map<String, LoginStrategy> payStrategyHandlerMap = new HashMap<>();
public LoginStrategy getHandler(String type) {
return payStrategyHandlerMap.get(type);
}
@Override
public void afterPropertiesSet() throws Exception {
Collection<LoginStrategy> values = appContext.getBeansOfType(LoginStrategy.class).values();
values.forEach(loginStrategy -> payStrategyHandlerMap.put(loginStrategy.getLoginType(), loginStrategy));
}
@Override
public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
appContext = applicationContext;
}
}
2. 创建策略接口
getLoginType：用来根据类型进行不同的策略
login：在上个类型的基础上执行登录获取token
package com.ruoyi.framework.handler;
/**
* 登录策略接口
*
* @author yizhi
*/
public interface LoginStrategy {
/**
* 类型
*/
String getLoginType();
/**
* 登录
*
* @param username
* @param password
* @param code
* @return
*/
String login(String username, String password, String code, String uuid);
}
3. 实现策略
a. 抽出密码登录中不需要修改的部分为公共类
package com.ruoyi.framework.handler;
import com.ruoyi.common.core.domain.entity.SysUser;
import com.ruoyi.common.core.domain.model.LoginUser;
import com.ruoyi.common.utils.DateUtils;
import com.ruoyi.common.utils.ServletUtils;
import com.ruoyi.common.utils.ip.IpUtils;
import com.ruoyi.framework.web.service.TokenService;
import com.ruoyi.system.service.ISysUserService;
import lombok.extern.log4j.Log4j2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.core.Authentication;
import org.springframework.stereotype.Component;
import javax.annotation.Resource;
@Log4j2
@Component
public class LoginHanlder {
@Autowired
private ISysUserService userService;
@Resource
private AuthenticationManager authenticationManager;
@Autowired
private TokenService tokenService;
/**
* 记录登录信息
*
* @param userId 用户ID
*/
public void recordLoginInfo(Long userId) {
SysUser sysUser = new SysUser();
sysUser.setUserId(userId);
sysUser.setLoginIp(IpUtils.getIpAddr(ServletUtils.getRequest()));
sysUser.setLoginDate(DateUtils.getNowDate());
userService.updateUserProfile(sysUser);
}
public SysUser selectUserByPhone(String phone) {
return userService.selectUserByPhone(phone);
}
/**
* 获取token
*
* @return
*/
public String getToken(LoginUser loginUser) {
return tokenService.createToken(loginUser);
}
public Authentication authenticate(Authentication authentication) {
return authenticationManager.authenticate(authentication);
}
}
b. 抽出原有密码登录为密码策略, 并继承抽出的公共类
密码这块跟原有的密码登录对比没有修改
package com.ruoyi.framework.handler;
import com.ruoyi.common.constant.CacheConstants;
import com.ruoyi.common.constant.Constants;
import com.ruoyi.common.core.domain.model.LoginUser;
import com.ruoyi.common.core.redis.RedisCache;
import com.ruoyi.common.exception.ServiceException;
import com.ruoyi.common.exception.user.CaptchaException;
import com.ruoyi.common.exception.user.CaptchaExpireException;
import com.ruoyi.common.exception.user.UserPasswordNotMatchException;
import com.ruoyi.common.utils.MessageUtils;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.framework.manager.AsyncManager;
import com.ruoyi.framework.manager.factory.AsyncFactory;
import com.ruoyi.framework.security.context.AuthenticationContextHolder;
import com.ruoyi.system.service.ISysConfigService;
import lombok.extern.log4j.Log4j2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.BadCredentialsException;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.stereotype.Component;
@Log4j2
@Component
public class PasswordLoginHanlder extends LoginHanlder implements LoginStrategy {
@Autowired
private ISysConfigService configService;
@Autowired
private RedisCache redisCache;
@Override
public String getLoginType() {
return "password";
}
@Override
public String login(String username, String password, String code, String uuid) {
log.info("这是密码策略");
boolean captchaEnabled = configService.selectCaptchaEnabled();
// 验证码开关
if (captchaEnabled) {
validateCaptcha(username, code, uuid);
}
// 用户验证
Authentication authentication = null;
try {
UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(username, password);
AuthenticationContextHolder.setContext(authenticationToken);
// 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
authentication = authenticate(authenticationToken);
} catch (Exception e) {
if (e instanceof BadCredentialsException) {
AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));
throw new UserPasswordNotMatchException();
} else {
AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, e.getMessage()));
throw new ServiceException(e.getMessage());
}
} finally {
AuthenticationContextHolder.clearContext();
}
AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
LoginUser loginUser = (LoginUser) authentication.getPrincipal();
recordLoginInfo(loginUser.getUserId());
// 生成token
return getToken(loginUser);
}
/**
* 校验验证码
*
* @param username 用户名
* @param code 验证码
* @param uuid 唯一标识
* @return 结果
*/
private void validateCaptcha(String username, String code, String uuid) {
String verifyKey = CacheConstants.CAPTCHA_CODE_KEY + StringUtils.nvl(uuid, "");
String captcha = redisCache.getCacheObject(verifyKey);
redisCache.deleteObject(verifyKey);
if (captcha == null) {
AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));
throw new CaptchaExpireException();
}
if (!code.equalsIgnoreCase(captcha)) {
AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
throw new CaptchaException();
}
}
}
c. 创建短信登录策略
重点是这里，checkCode方法进行自定义校验，然后根据当前是手机号登录还是什么登录查出用户信息，之后的代码就是跟密码登录一样了，不用改什么了
checkCode(phone, code);
log.info("这是短信登录");
//查询用户
SysUser sysUser = selectUserByPhone(phone);
附上完整代码
package com.ruoyi.framework.handler;
import cn.hutool.core.util.ObjectUtil;
import cn.hutool.core.util.StrUtil;
import com.ruoyi.common.constant.Constants;
import com.ruoyi.common.core.domain.entity.SysUser;
import com.ruoyi.common.core.domain.model.LoginUser;
import com.ruoyi.common.core.redis.RedisCache;
import com.ruoyi.common.exception.ServiceException;
import com.ruoyi.common.exception.user.UserPasswordNotMatchException;
import com.ruoyi.common.utils.MessageUtils;
import com.ruoyi.framework.manager.AsyncManager;
import com.ruoyi.framework.manager.factory.AsyncFactory;
import com.ruoyi.framework.security.context.AuthenticationContextHolder;
import lombok.SneakyThrows;
import lombok.extern.log4j.Log4j2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.serializer.StringRedisSerializer;
import org.springframework.security.authentication.BadCredentialsException;
import org.springframework.security.core.Authentication;
import org.springframework.stereotype.Component;
import java.util.List;
@Log4j2
@Component
public class SmsLoginHanlder extends LoginHanlder implements LoginStrategy {
@Autowired
private RedisCache redisCache;
@Override
public String getLoginType() {
return "sms";
}
@Override
public String login(String phone, String password, String code, String uuid) {
checkCode(phone, code);
log.info("这是短信登录");
//查询用户
SysUser sysUser = selectUserByPhone(phone);
if (ObjectUtil.isEmpty(sysUser)) {
throw new UserPasswordNotMatchException();
}
// 用户验证
Authentication authentication = null;
try {
authentication = authenticate(new LoginAuthenticationToken(sysUser.getUserName(), "sms"));
} catch (Exception e) {
if (e instanceof BadCredentialsException) {
AsyncManager.me().execute(AsyncFactory.recordLogininfor(phone, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));
throw new UserPasswordNotMatchException();
} else {
AsyncManager.me().execute(AsyncFactory.recordLogininfor(phone, Constants.LOGIN_FAIL, e.getMessage()));
throw new ServiceException(e.getMessage());
}
} finally {
AuthenticationContextHolder.clearContext();
}
AsyncManager.me().execute(AsyncFactory.recordLogininfor(phone, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
LoginUser loginUser = (LoginUser) authentication.getPrincipal();
recordLoginInfo(loginUser.getUserId());
// 生成token
return getToken(loginUser);
}
@SneakyThrows
private void checkCode(String phone, String code) {
if (StrUtil.isBlank(code)) {
throw new RuntimeException("验证码不能为空");
}
if (isSuperAccount(phone)) {
return;
}
String key = "SMS_CODE_KEY:" + phone;
redisCache.redisTemplate.setKeySerializer(new StringRedisSerializer());
if (!redisCache.redisTemplate.hasKey(key)) {
throw new RuntimeException("验证码不正确");
}
Object codeObj = redisCache.redisTemplate.opsForValue().get(key);
if (codeObj == null) {
throw new RuntimeException("验证码不正确");
}
String saveCode = codeObj.toString();
if (StrUtil.isBlank(saveCode)) {
redisCache.redisTemplate.delete(key);
throw new RuntimeException("验证码不正确");
}
if (!StrUtil.equals(saveCode, code)) {
throw new RuntimeException("验证码不正确");
}
redisCache.redisTemplate.delete(key);
}
private Boolean isSuperAccount(String mobile) {
List<String> accountList = redisCache.redisTemplate.opsForList().range("SUPER_ACCOUNT:", 0, -1);
if (accountList != null) {
for (String s : accountList) {
if (mobile.contains(s)) {
return true;
}
}
}
return false;
}
}
到此策略就完成了
下面是用户登录操作
1. 修改LoginBody，添加登录类型
位置：com.ruoyi.common.core.domain.model
/**
* 登录类型
*/
private String loginType;
2. 原登录接口改为策略登录(/login)
位置：com.ruoyi.web.controller.system;
/**
* 登录方法
*
* @param loginBody 登录信息
* @return 结果
*/
@PostMapping("/login")
public AjaxResult login(@RequestBody LoginBody loginBody) {
if (ObjectUtils.isEmpty(loginBody.getLoginType())) {
return AjaxResult.error("登录类型不能为空");
}
// 生成令牌
String token = loginContext.getHandler(loginBody.getLoginType())
.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(), loginBody.getUuid());
AjaxResult ajax = AjaxResult.success();
ajax.put(Constants.TOKEN, token);
return ajax;
}
到此，后端接口部分就完成了
前端修改 以手机号验证码为例
1. 修改src/api 下的login文件
修改
// 登录方法
export function login(username, password, code, uuid, loginType) {
const data = {
username,
password,
code,
uuid,
loginType
}
return request({
url: '/login',
headers: {
isToken: false
},
method: 'post',
data: data
})
}
获取短信验证码
// 获取短信验证码
export function getSms(query) {
return request({
url: '/user/sms',
method: 'get',
params: query
})
}
2. 创建短信登录页面smslogin.vue
位置：src/views/smslogin
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">一知随记</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="手机号"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
</el-input>
<div class="login-code">
<el-button
type="primary"
@click="getVerify"
style="width:100%;"
>
<span v-show="show">获取验证码</span>
<span v-show="!show" class="count">{{ count }} s</span>
</el-button>
</div>
</el-form-item>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: left;" v-if="login">
<router-link class="link-type" :to="'/login'">密码登录</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright yizhi-w.com All Rights Reserved.</span>
<span>ICP主体备案号: 辽ICP备2022012082号</span>
</div>
</div>
</template>
<script>
import Cookies from 'js-cookie'
import { getSms } from '@/api/login'
export default {
name: 'Login',
data() {
return {
codeUrl: '',
loginForm: {
username: '',
code: ''
},
loginRules: {
username: [
{ required: true, trigger: 'blur', message: '请输入您的手机号' }
],
code: [
{ required: true, trigger: 'blur', message: '请输入验证码' }
]
},
loading: false,
login: true,
redirect: undefined,
show: true,
count: '', // 初始化次数
timer: null,
queryParams: {
phone: null
}
}
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
},
created() {
this.getCookie()
},
methods: {
getVerify() {
// 验证手机号
if (this.checkPhone() === false) {
return false
} else {
this.queryParams.phone = this.loginForm.username
getSms(this.queryParams).then(res => {
this.$message.success('验证码发送成功')
const TIME_COUNT = 60 //更改倒计时时间
if (!this.timer) {
this.count = TIME_COUNT
this.show = false
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--
} else {
this.show = true
clearInterval(this.timer) // 清除定时器
this.timer = null
}
}, 1000)
}
})
}
},
checkPhone() {
let phone = this.loginForm.username
if (!/^1[3456789]\d{9}$/.test(phone)) {
this.$message.error('请填写正确的手机号')
return false
}
},
getCookie() {
const username = Cookies.get('username')
const code = Cookies.get('code')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
code: code === undefined ? this.loginForm.code : code,
loginType: 'sms'
}
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('Login', this.loginForm).then(() => {
this.$router.push({ path: this.redirect || '/' }).catch(() => {
})
}).catch(() => {
this.loading = false
})
}
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
</style>
3. 修改login.vue页面
位置：src/views/login
部分代码 放在相应位置，51行左右
<div style="float: left;" v-if="smslogin">
<router-link class="link-type" :to="'/smslogin'">短信登录</router-link>
</div>
loginForm添加 loginType: “password”,
loginForm: {
username: "admin",
password: "admin123",
rememberMe: false,
loginType: "password",
code: "",
uuid: ""
},
短信登录开关设置，放在了注册开关下面
// 注册开关
register: true,
smslogin: true,
getCookie方法添加 loginType: ‘password’
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
loginType: 'password'
};
},
4. 修改登录相关,添加loginType
位置：src/store/modules/user.js
// 登录
Login({ commit }, userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const uuid = userInfo.uuid
const loginType = userInfo.loginType
return new Promise((resolve, reject) => {
login(username, password, code, uuid, loginType).then(res => {
setToken(res.token)
commit('SET_TOKEN', res.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
5. 页面路由添加短信页面路由
位置：src/router/index.js
{
path: '/smslogin',
component: () => import('@/views/smslogin'),
hidden: true
},
6. 修改权限,添加个smslogin登录不鉴权
位置：src/permission.js
const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/smslogin']
到此后端、前端的登录都完成了
以后要添加其他登录，
后端只需添加新的策略，
前端根据需求相应新增，后台管理，小程序免密等
4877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
