关于使用angular-cli开发angular2项目时遇到的一些问题集锦

前端之家收集整理的这篇文章主要介绍了关于使用angular-cli开发angular2项目时遇到的一些问题集锦前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、安装angular-cli时的问题

因为某些大家都知道的问题,会出现一些问题,无法正常安装成功!我在网上找了一些方法给大家放出了共享。

配置.npmrc文件

  1. sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
  2. phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
  3. electron_mirror=https://npm.taobao.org/mirrors/electron/
  4. registry=https://registry.npm.taobao.org/
  5. prefix=D:\Program Files\nodejs\node_global
  6. cache=D:\Program Files\nodejs\node_cache

.npmrc 文件位置在系统用户根目录(windows),其他系统不清楚,如果没有这个文件可以使用命令行去设置,如:

  1. npm config set registry=https://registry.npm.taobao.org/

二、路由守卫的问题

前端时间刚接触angular2的时候想做一个简单项目,想法是做任务事情之前都必须登录,可是折腾来折腾去就是不知如何下手,最后在每个组件里面都去判断下是否登录的情况,但还是不理想,然后去看官方的文档,发现个有趣的东西,那就是路由守卫,但去看了下 @大漠穷秋 的NiceFish项目之后,发现也没这个东西,直到最近才集合网络上的文章和实践,琢磨出来了。

1、第一步

首先添加一个文件app/service/auth-guard.service.ts,这个代码是用来做路由认证服务,我这里做的是根据登录后存储的UID判断是否登录。没登录跳转登录界面,登录了的则返回true。

  1. import { Injectable } from '@angular/core';
  2. import { CanActivate,Router,ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
  3.  
  4. @Injectable()
  5. export class AuthGuard implements CanActivate {
  6. constructor(private router: Router) {}
  7.  
  8. canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean {
  9. //取得用户访问的URL
  10. let url: string = state.url;
  11.  
  12. return this.checkLogin(url);
  13. }
  14.  
  15. checkLogin(url: string): boolean {
  16. //如果用户已经登录就放行
  17. if (localStorage.getItem('uid')) { return true; }
  18.  
  19. //否则,存储要访问的URL到本地
  20. localStorage.setItem('redirectUrl',url);
  21.  
  22. // 然后导航到登录页面
  23. this.router.navigate(['/login']);
  24. return false;
  25. }
  26. }

2、第二步

就是在路由里面做修改,路由里面导入认证服务

  1. import { AuthGuard } from './service/auth-guard.service';

路由对象修改

  1. {
  2. path: 'home',component:HomeComponent,canActivate: [AuthGuard],},

3、第三步

当然别忘了在根模块里面导入认证服务,修改app/app.module.ts文件

  1. import { AuthGuard } from './service/auth-guard.service';
  1. providers: [ AuthGuard],

才疏学浅,有什么不对的地方欢迎指正,也是刚接触。

后续待更

内容会经常更新,目前正在学习中

猜你在找的Angularjs相关文章