Spring Boot+Angular登录报TypeError Token无法写入Cookie

• 登录请求可正常将用户名、密码发送至Spring Boot后端，后端校验通过后正常返回用户token
• token无法写入浏览器Cookie，管理面板页面无法正常打开
• 浏览器开发者工具控制台抛出错误：angular.min.js:129 TypeError: Cannot read properties of undefined (reading '0')

• 响应字段未做空值校验：登录成功回调中直接读取response.datalist[0].token，但实际接口返回的datalist字段为undefined，访问undefined值的索引直接触发类型错误，后续所有逻辑（包括Cookie写入、页面跳转）都被中断。
• Cookie写入逻辑顺序错误：代码先执行Cookie写入操作，再判断token是否为空，空值校验完全没有拦截作用。
• Cookie键名拼写错误：代码中第二次调用$cookies.put时将键名userToken错写为uerToken，和面板页读取的键名不匹配，就算写入成功也无法被面板页读取。
• 表单默认提交未拦截：登录按钮为submit类型，点击后会触发表单默认刷新行为，打断Angular异步请求的回调执行。
• Cookie路径未指定：AngularJS的$cookies.put默认会用当前页面路径作为Cookie的path属性，如果登录页部署在/login路径下，写入的Cookie默认仅在/login路径下生效，/panel路径无法读取。

1. 修正登录控制器逻辑 #

替换原有loginController代码，补充空值校验、调整逻辑顺序、修正拼写错误、指定Cookie根路径：

app.controller("loginCtrl", function ($scope, apiHandler, $cookies) {
    $scope.user = {};
    $scope.doLogin = (e) => {
        // 阻止表单默认提交刷新
        e.preventDefault();
        apiHandler.callPost(
            'user/login',
            $scope.user,
            (response) => {
                let token = null;
                // 可打开下面的控制台日志，确认后端返回的实际字段结构
                // console.log('登录接口响应：', response);
                
                // 多结构兼容读取token，避免访问undefined属性
                if (response?.datalist?.length > 0) {
                    token = response.datalist[0].token;
                } else if (response?.token) {
                    token = response.token;
                } else if (response?.data?.token) {
                    token = response.data.token;
                }

                // 先校验token有效性，再执行写入
                if (!token || token.trim() === "") {
                    alert("获取登录凭证失败，请重试");
                    return;
                }
                // 指定path为根路径，保证全站可读取该Cookie，修正键名拼写
                $cookies.put("userToken", token, {path: '/'});
                location.href = "/panel";
            }, (error) => {
                console.error('登录请求异常：', error);
                alert("登录失败，请检查账号密码或网络连接");
            });
    }
});

2. 修正登录页按钮事件传参 #

将登录按钮的ng-click指令修改为传入事件对象，配合控制器里的默认行为拦截：

<button type="submit" class="btn btn-primary" ng-click="doLogin($event)">Login</button>

3. 验证修复结果 #

• 触发登录操作，确认控制台不再抛出类型错误
• 打开浏览器开发者工具-应用-Cookies面板，检查当前域名下是否存在键为userToken、路径为/的Cookie条目，值与后端返回的token一致
• 跳转至/panel路径，确认面板控制器可正常读取token，不会自动跳回登录页。

内容的提问来源于stack exchange，提问作者Ali Bazargani