在Angular下实现自动登录的功能

作者:frank 发表日期:2016-08-11 21:44:13 更新日期:2016-08-15 20:16:23 分类:猿文色

摘要

在Angular下实现自动登录的功能

正文

萌友是一套类似友盟的后台管理系统,使用 Angular 实现,使用 ui-router 进行路由管理。

再看之前实现的代码,简直惨不忍睹啊,所以最近重构了一下萌友的自动登录功能。

如下图,用户在登录的时候选择了自动登录,则下一次进入登录页会自动跳转到下一个页面(原流程登录成功后的页面)。

自动登录

怎么样实现这个功能呢?原来的想法是在 localStorage 中保存 autoLogin 的状态,每次进入 login 页面的时候获取这个状态,如果 autoLogin 为 true 就使用 \$state.go 跳转到下一个页面。但是由于在 controller 加载的时候调用 \$state.go 是没有作用的(此处有疑问?),所以必须使用 \$timeout 在 controller 加载完成后执行 \$state.go,这个时候登录页已经完全渲染出来了,所以用户会看到登录页闪一下然后又跳转到下一个页面的现象。

修改之后的做法是在 ng-app 初始化执行 run 方法的时候,在 \$rootScope 上注册 \$stateChangeStart 事件,在事件回掉中监听下一个 state,如果发现下一个 state 是 login 并且 autoLogin 为 true,则阻止默认事件,直接跳转到下一个页面,这样就可以避免登录页闪一下的现象。