微信小程序的授权登录遵循 OAuth 2.0 授权流程，核心步骤为：

获取用户授权（获取昵称、头像等基础信息）获取微信登录凭证（code）后端服务器通过 code 换取用户唯一标识（openid）生成自定义登录态（Token）返回给前端

注意：微信官方要求，获取用户信息需用户主动触发（如点击按钮），不能自动弹出授权框

二、前端授权界面开发

在src/pages/index/index.vue中添加授权登录按钮和用户信息展示区域：

添加对应的样式：

/* 用户信息样式 */
.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;
}
.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-bottom: 30rpx;
}
.nickname {
  font-size: 36rpx;
  margin-bottom: 40rpx;
}
.logout-btn {
  background-color: #ff4d4f;
  color: white;
}
/* 登录按钮样式 */
.login-btn {
  background-color: #07c160;
  color: white;
  padding: 15rpx 60rpx;
  margin-top: 40rpx;
}

三、实现授权登录逻辑

在部分添加登录相关逻辑，完整代码如下：

四、核心代码示例（Java）

前端获取到 code 后，需要后端配合完成登录流程，以下是 Java 版本的核心实现（基于 Spring Boot 框架）：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;
import com.alibaba.fastjson.JSONObject;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
@RestController
public class LoginController {
    // 小程序AppID和AppSecret（实际项目中建议放在配置文件）
    private static final String APP_ID = "你的小程序AppID";
    private static final String APP_SECRET = "你的小程序AppSecret";
    // JWT密钥（实际项目中使用更复杂的密钥）
    private static final String JWT_SECRET = "你的密钥";
    @GetMapping("/api/login")
    public Result login(@RequestParam String code) {
        try {
            // 1. 调用微信接口换取openid和session_key
            String url = String.format(
                "https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code",
                APP_ID, APP_SECRET, code
            );
            
            RestTemplate restTemplate = new RestTemplate();
            String response = restTemplate.getForObject(url, String.class);
            JSONObject jsonObject = JSONObject.parseObject(response);
            
            // 检查是否获取成功
            if (jsonObject.containsKey("errcode")) {
                return Result.error("登录失败：" + jsonObject.getString("errmsg"));
            }
            
            String openid = jsonObject.getString("openid");
            String sessionKey = jsonObject.getString("session_key");
            
            // 2. 生成JWT token（有效期7天）
            Date expiration = new Date(System.currentTimeMillis() + 7 * 24 * 60 * 60 * 1000);
            String token = Jwts.builder()
                .setSubject(openid)
                .setExpiration(expiration)
                .signWith(SignatureAlgorithm.HS256, JWT_SECRET)
                .compact();
            
            // 3. 查询或创建用户（根据openid，此处省略数据库操作）
            // User user = userService.findByOpenid(openid);
            // if (user == null) {
            //     user = new User();
            //     user.setOpenid(openid);
            //     userService.save(user);
            // }
            
            // 4. 返回token给前端
            Map data = new HashMap<>();
            data.put("token", token);
            return Result.success(data, "登录成功");
            
        } catch (Exception e) {
            e.printStackTrace();
            return Result.error("服务器异常，登录失败");
        }
    }
    
    // 响应结果封装类
    static class Result {
        private int code;
        private String message;
        private Object data;
        
        public static Result success(Object data, String message) {
            Result result = new Result();
            result.code = 0;
            result.data = data;
            result.message = message;
            return result;
        }
        
        public static Result error(String message) {
            Result result = new Result();
            result.code = -1;
            result.message = message;
            return result;
        }
        
        // getter和setter省略
    }
}

注意：实际项目中需要添加以下依赖（Maven）：

    org.springframework.boot
    spring-boot-starter-web



    com.alibaba
    fastjson
    1.2.76



    io.jsonwebtoken
    jjwt
    0.9.1

五、调试与上线注意事项本地调试配置：

2.上线前配置：

3.用户体验优化：

通过本文的步骤，你实现微信授权登录功能。这一功能是大多数小程序的基础，掌握后可以进一步开发用户中心功能。

如果在开发中遇到授权相关问题，欢迎在评论区留言讨论～