html登陆成功后跳转页面跳转,怎么设置登录成功后跳转到相应的页面

AngularJS登录与权限控制
本文介绍使用AngularJS实现登录页面、用户权限判断及页面跳转功能的具体实践。包括如何设置初始登录页面、如何在登录成功后跳转到指定页面、如何在控制器中判断用户是否登录等关键步骤。

想要用angularjs实现的功能是

一进入就是一个登录页面(login.html),如果没有账号密码就注册,登录成功后跳转到相应的页面(shopcart.html)

碰到的问题

1.一进入页面没有显示登录页面

2.显示成功后该如何跳转到相应的页面

3.应该在何处判断用户是否登录,或者登录超时之类的

下面是我的文档目录结构

bVqzCE

app.js里的代码如下

'use strict';

// Declare app level module which depends on filters, and services

angular.module('myApp', [])

.run(function($rootScope) {

$rootScope.$on('$stateChangeStart', function(event,toState,toParams,fromState,fromParams) {

if(toState.name == 'login') return;//如果是进入登录页面则允许

//如果用户不存在

if(!$rootScope.user || $rootScope.user.token) {

event.preventDefault();//取消默认跳转行为

$state.go("login",{from:fromState.name,w:'notLogin'});//跳转到登录界面

}

});

})

.config(function($httpProvider,$rootProvider) {

$httpProvider.interceptors.push('userInterceptor');

$rootProvider

.when('/',{

templateUrl:'views/shopcart.html'

})

.when('/login', {

templateUrl: 'views/account/login/login.html'

})

.when('register', {

templateUrl: 'views/account/register/register.html'

})

.otherwise({

redirectTo:'/login'

});

})

.factory('userInterceptor',["$q","$rootScope",function($q,$rootScope) {

return {

request: function(config) {

config.headers["TOKEN"] = $rootScope.user.token;

return config;

},

responseError: function(response) {

var data = response.data;

//判断出错误码,如果是未登录

if(data["errorCode"] == "500999") {

//清空本地token存储信息

$rootScope.user = {token: ""};

//全局事件,方便其他view获取该事件,并给以相应的提示或处理

$rootScope.$emit("userInterceptor","notLogin",response)

}

//如果是登录超时

if(data["errorCode"] == "500998") {

$rootScope.$emit("userInterceptor","sessionOut",response);

}

return $q.reject(response);

}

}

}]);

login.controller.js文件里的代码如下

'use strict';

angular.module('myApp',[])

.controller('LogoinCtrl',["$rootScope","$scope", function($rootScope,$scope) {

//跳转到登录界面,记录了一个from,这样可以在登陆后自动跳转到未登录之前的那个页面去

$state.go("login", {from:$state.current.name,w:errorType});

if($rootScope.user,token) {

$state.go($rootScope.defaultPage);

return;

}

//登录成功后跳转到上一次页面,也就是上面记录的from

var from = $stateParams["from"];

$state.go(from && from != "login" ? from : $rootScope.defaultPage);

}]);

login.js里的代码如下

angular.module('myApp',[])

.config(function($stateProvider) {

$stateProvider

.state('login', {

url:"/login",

templateUrl:"views/account/login/login.html"

})

.state('register', {

url:'/register',

templateUrl:"views/account/register/register.html"

})

.otherwise({redirectTo: '/login'});

});

shopcart.js里的代码如下

'use strict';

angular.module('myApp',[])

.config(function($stateProvider) {

$stateProvider

.state('/',{

url:'/home',

templateUrl:'views/account/shopcart/shopcart.html' //登录成功后跳转到购物车页面

})

.oherwise({redirecTo:'/login'});

})

您可以使用以下HTML代码创建一个简单的登录和注册页面: ```html <!DOCTYPE html> <html> <head> <title>登录与注册</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } .container { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 3px; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: #fff; border: none; border-radius: 3px; cursor: pointer; } .form-divider { text-align: center; margin-bottom: 15px; } .form-divider::before, .form-divider::after { content: ""; display: inline-block; width: 40%; border-bottom: 1px solid #999; vertical-align: middle; } .form-divider::before { margin-right: 15px; } .form-divider::after { margin-left: 15px; } .register-link { display: block; text-align: center; color: #999; text-decoration: none; margin-top: 10px; } </style> </head> <body> <div class="container"> <h2>登录</h2> <form action="login.php" method="post"> <input type="text" name="username" placeholder="用户名" required> <input type="password" name="password" placeholder="密码" required> <input type="submit" value="登录"> </form> <div class="form-divider">或</div> <a href="register.html" class="register-link">创建新账户</a> </div> </body> </html> ``` 这段HTML代码创建了一个简单的登录页面,其中包括一个用户名输入框、一个密码输入框和一个登录按钮。如果点击"创建新账户"链接,将跳转到注册页面(register.html)。 请注意,上述代码中的表单动作(`action`)被设置为`login.php`,这是处理登录表单的服务器端脚本文件。您需要根据自己的需求将其替换为实际的登录处理脚本。同样,注册页面(register.html)需要您自行创建和定义。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值