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

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

前言

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

序列图：

门户页 Nginx Nacos 调用代理后的登录接口代理转发返回Token信息调用成功后会返回 Token 信息并将其保存到 localStorage 中 Token保存成功后调用代理后的管理页面地址代理转发返回门户页 Nginx Nacos

Nacos 登录接口

url 复制代码

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

返回值：

json 复制代码

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

示例代码

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

1、JavaScript 示例

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

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

conf 复制代码

# 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;
    }
}

总结

1、增加一个模拟 Nacos 控制台登录过程

2、通过 Nginx 配置解决页面和 Nacos 控制台页面不同源的问题，保证用户鉴权成功

像 Nacos 控制台这种明文传输用户密码也就是作为内部工具使用可以，真要上线，安全测试肯定不能通过。我们可以基于这个思路进行优化调整