当前位置：首页 > news >正文

业务系统跳转Nacos免登录方案实践

news 2025/8/4 15:02:36

业务系统跳转Nacos免登录方案实践

前言
- 序列图：
- Nacos 登录接口
- 示例代码
- - 1、JavaScript 示例
  - 2、Nginx 配置示例
- 总结

前言

要求开发一个门户页面把现有的应用系统以卡片的形式集成进来，点击卡片能免登录跳转（这里划重点，核心诉求）到各系统，其中就包含了Nacos。要求：点击微服务管理平台卡片会跳转到 Nacos 的控制台。

序列图：

Nacos 登录接口

// Nginx 代理后的地址
http://ip:port/nacos/v1/auth/users/login

返回值：

{"accessToken": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJuYWNvcyIsImV4cCI6MTYwNTYyOTE2Nn0.2TogGhhr11_vLEjqKko1HJHUJEmsPuCxkur-CfNojDo","tokenTtl": 18000,"globalAdmin": true
}

示例代码

注意所有地址均为代理后地址

1、JavaScript 示例

此处用来模拟用户登录操作

const http = new XMLHttpRequest();
// nacos 登录接口
const url = "http://ip:port/nacos/v1/auth/users/login";
const formData = new window.FormData();
formData.append("username", "nacos");
formData.append("password", "nacos");
http.open("POST", url, true);
http.onreadystatechange = function () {if (http.readyState == 4 && http.status == 200) {localStorage.setItem("token",// 此处注意返回值格式，如果是字符串需要先转换成 JSON 对象JSON.stringify(JSON.parse(http.responseText)) );// 登录成功后打开 nacos 控制台页面window.location.href = "http://ip:port/nacos/#/";}
};
http.send(formData);

2、Nginx 配置示例

实际项目部署时页面和跳转的 Nacos 页面是不同源的，存在跨域操作。既然跨域，保存在 localStorage 中的 token 信息就不能共享，怎么解决呢，Nginx 该派上用场了

注意修改 ip 和 port

# HTTP
server {# Nginx 默认端口listen 80;# Nacos 代理 开头表示 uri 以某个常规字符串开头，理解为匹配 url路径即可location ^~/nacos/ {# Nacos 真实访问地址proxy_pass http://ip:port/nacos/;}# 缓存的对象location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|ico)$ {# 缓存的时间，30天 当用户第一次访问这些内容时，会把这些内容存储在用户浏览器本地，这样用户第二次及以后继续访问该网站时，浏览器会检查加载已经缓存在用户浏览器本地的内容，就不会去服务器下载了，直到缓存的内容过期或被清除为止expires 30d;# 不记录访问日志access_log off;}
}