SQL Server删除导航栏字段后AngularJS页面内容未清除及跳转登录问题

嘿，我来帮你搞定这个问题！看起来你现在遇到两个核心问题：一是删除导航选项A后，对应的页面内容还停留在界面上；二是需要在删除操作完成后自动清理内容并跳转到登录页面。咱们一步步来解决：

一、先解决页面内容残留的核心问题 #

你当前的菜单是通过ng-repeat渲染listmenu数据，但删除选项后，虽然菜单更新了，当前路由状态还停留在被删除选项对应的页面，所以内容不会自动消失。你需要在删除操作完成后，检查当前路由是否属于已被删除的菜单，如果是，就切换到登录页。

首先补全并修改你的controller.js删除逻辑（我注意到你现有代码里删除部分是注释状态）：

// 假设这是你触发删除菜单的方法
$scope.deleteMenu = function(targetMenuId) {
    // 调用后端删除接口，传入要删除的菜单ID
    User.DeleteMenu({id: targetMenuId}, function(res) {
        // 1. 删除成功后，更新本地菜单列表，过滤掉被删除的项
        $scope.listmenu = $scope.listmenu.filter(item => item.menu_id !== targetMenuId);
        
        // 2. 把菜单列表同步到全局rootScope，方便路由守卫检查
        $rootScope.listmenu = $scope.listmenu;
        
        // 3. 检查当前路由是否对应被删除的菜单，如果是就跳登录页
        const deletedMenuUrl = $scope.listmenu.find(item => item.menu_id === targetMenuId)?.MenuLink;
        if (deletedMenuUrl && $state.current.url === `/${deletedMenuUrl.replace('#!', '')}`) {
            authService.logOut();
            $state.go('login');
        }

        // 4. 刷新用户权限数据，确保后续验证是最新的
        authService.fillAuthData();
    }, function(err) {
        console.error('删除菜单失败:', err);
    });
};

二、优化路由守卫，彻底拦截已删除页面的访问 #

你的app.js里的路由权限逻辑有小问题，比如authorizedRoles.remove(id)写法错误，而且权限验证的顺序也可以调整。修改后增加菜单存在性检查，确保用户即使手动输入已删除页面的路由，也会被拦截跳转到登录页：

.run(["$rootScope", "authService", "$state", '$window', function ($rootScope, authService, $state, $window) {
    $rootScope.$on("$stateChangeSuccess", function (event, toState) {
        const authorizedRoles = toState.data?.role;
        
        // 先判断用户是否登录，未登录直接跳登录页
        if (!authService.authentication.isAuth) {
            $state.go('login');
            return;
        }

        // 检查目标页面的角色权限
        if (authorizedRoles && authorizedRoles.length > 0) {
            if (!authService.isAuthorized(authorizedRoles)) {
                authService.logOut();
                $state.go('login');
                return;
            }
        }

        // 额外检查：当前路由对应的菜单是否还存在（防止用户手动输入已删除页面的URL）
        if ($rootScope.listmenu) {
            const currentPageUrl = $state.current.url.replace('/', '');
            const isMenuExists = $rootScope.listmenu.some(item => item.MenuLink === `#!${currentPageUrl}`);
            if (!isMenuExists) {
                authService.logOut();
                $state.go('login');
            }
        }
    });
}])

三、优化导航栏的HTML结构 #

你的topnavbar.html里用<span>包裹<li>的写法不太规范，直接在<li>上绑定ng-repeat更符合HTML语义，也能避免潜在的渲染问题：

<ul class="clearfix" style="margin-top: 0px">
    <li ng-repeat="item in listmenu" ng-if="item.menu_id!=7">
        <a href="#!{{item.MenuLink}}" class="w3-bar-item w3-button w3-border-right">
            <center>{{item.designation_menu}}</center>
        </a>
    </li>
</ul>

四、关键注意点 #

• 确保删除菜单的后端接口真正从SQL Server中移除了对应的数据，并且User.AccessRole接口返回的菜单列表已经更新；
• 把listmenu同步到$rootScope是为了让路由守卫能全局访问到最新的菜单数据，避免用户绕过导航栏直接访问已删除的页面；
• 删除操作完成后调用authService.fillAuthData()，确保用户权限数据是最新的。

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