一、安装angular-cli时的问题
@H_
403_2@因为某些大家都知道的问题,会出现一些问题,无法正常安装成功!我在网上找了一些
方法给大家放出了共享。
@H_
403_2@配置.npmrc
文件
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org/
prefix=D:\Program Files\nodejs\node_global
cache=D:\Program Files\nodejs\node_cache
@H_
403_2@.npmrc
文件位置在系统
用户根目录(windows),其他系统不清楚,如果没有这个
文件可以使用命令行去设置,如:
npm config set registry=https://registry.npm.taobao.org/
二、路由守卫的问题
@H_
403_2@前端时间刚接触angular2的时候想做一个简单项目,想法是做任务事情之前都必须
登录,可是折腾来折腾去就是不知如何下手,最后在每个组件里面都去判断下是否
登录的情况,但还是不理想,然后去看官方的文档,发现个有趣的东西,那就是路由守卫,但去看了下
@大漠穷秋 的NiceFish项目之后,发现也没这个东西,直到最近才集合网络上的
文章和实践,琢磨出来了。
1、第一步
@H_
403_2@首先
添加一个
文件app/service/auth-guard.service.ts,这个
代码是用来做路由认证服务,我这里做的是根据
登录后存储的UID判断是否
登录。没
登录则
跳转到
登录界面,
登录了的则返回true。
import { Injectable } from '@angular/core';
import { CanActivate,Router,ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean {
//取得用户访问的URL
let url: string = state.url;
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
//如果用户已经登录就放行
if (localStorage.getItem('uid')) { return true; }
//否则,存储要访问的URL到本地
localStorage.setItem('redirectUrl',url);
// 然后导航到登录页面
this.router.navigate(['/login']);
return false;
}
}
2、第二步
@H_
403_2@就是在路由里面做
修改,路由里面导入认证服务
import { AuthGuard } from './service/auth-guard.service';
@H_
403_2@路由对象
修改
{
path: 'home',component:HomeComponent,canActivate: [AuthGuard],},
3、第三步
@H_
403_2@当然别忘了在根模块里面导入认证服务,
修改app/app.module.ts
文件
import { AuthGuard } from './service/auth-guard.service';
providers: [ AuthGuard],
@H_
403_2@
才疏学浅,有什么不对的地方欢迎指正,也是刚接触。
后续待更
@H_403_2@内容会经常更新,目前正在学习中