[英]Restrict user going to the inner page without login using angular-ui-route
I have an angular project. 我有一个有角度的项目。 In that if i type in the url as "dashboard" it is redirecting to "dashboard.html" page. 如果我在网址中键入“仪表板”,则会重定向到“dashboard.html”页面。 But i want to restrict user going into that page without successfully logged In. 但我想限制用户进入该页面而未成功登录。
Below in my routing code please check. 在我的路由代码下面请检查。
index.js index.js
angular.module('adminsuite',['ui.router','ngCookies']).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login', {
url: '/',
views:{
pageContent:{
templateUrl: 'Login/login.html',
controller: 'loginController'
},
footer:{
templateUrl: 'common/footer.html',
controller: 'footerController'
}
}
})
// HOME STATES AND NESTED VIEWS ========================================
.state('dashboard', {
url: '/dashboard',
views:{
header:{
templateUrl: 'common/header.html',
controller: 'headerController'
},
pageContent:{
templateUrl: 'dashboard/dashboard.html',
controller: 'dashboardController'
},
footer:{
templateUrl: 'common/footer.html',
controller: 'footerController'
}
}
})
//SURVEY STATES
.state('survey', {
url: '/survey',
views:{
header:{
templateUrl: 'common/headerTool.html',
controller: 'headerController'
},
pageContent:{
templateUrl: 'survey/survey.html',
controller: 'surveyController'
},
footer:{
templateUrl: 'common/footer.html',
controller: 'footerController'
}
}
});
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
});
in your loginController store value in $rootscope if user sucessfully logged in. 如果用户成功登录,则在$ rootscope中的loginController存储值中。
if(userloggedin == true )
{
$rootscope.loggedinuser = true
}
in your dashboardController get value from $rootscope and check if $rootscope.loggedinuser is equal to true then dasboard.html page will show otherwise page redirect to login page. 在您的dashboardController中从$ rootscope获取值并检查$ rootscope.loggedinuser是否等于true然后dasboard.html页面将显示否则页面重定向到登录页面。
in your dashboardController 在您的dashboardController中
if($rootscope.loggedinuser !=true)
{
$state.go('login');
}
You can do one thing. 你可以做一件事。 In your loginController
create a variable and store that in local storage
if the user successfully logged in. And in your dashboard
routing statement resolve that data from local storage. 在loginController
创建变量并在用户成功登录时将其存储在local storage
中。并在dashboard
路由语句中从本地存储中解析该数据。 The page will load to /dashboard
only if it can resolve that data. 仅当页面可以解析该数据时,该页面才会加载到/dashboard
。 If he is not logged in the resolving data will be undefined 如果他未登录,则解析数据将是未定义的
.state('dashboard', {
url: '/dashboard',
views:{
header:{
templateUrl: 'common/header.html',
controller: 'headerController'
},
pageContent:{
templateUrl: 'dashboard/dashboard.html',
controller: 'dashboardController'
},
footer:{
templateUrl: 'common/footer.html',
controller: 'footerController'
}
},
resolve: {
accessToken: ['$localStorage', function($localStorage){
return $localStorage.accessToken
}]
}
})
OR your resolve code can be like 或者你的解析代码就像
resolve: {
accessToken: ['$localStorage','$state', function($localStorage, $state){
if($localStorage.accessToken)
return $localStorage.accessToken
else{
$state.go(login)
return;
}
}]
}
here variable accessToken
is storing to $localStorage
in your loginController
as 这里变量accessToken
存储在loginController
$localStorage
中
if('successfully logged in'){
$localStorage.accessToken = 'a random value';
}
You can use sessionStorage
, $cookieStore
etc. instead of $localStorage
. 您可以使用sessionStorage
, $cookieStore
等代替$localStorage
。 It's option of you. 这是你的选择。
There is one more option. 还有一个选择。 Broadcasting a variable when login happens and resolve that data in dashboard 登录发生时广播变量并在仪表板中解析该数据
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.