angular数据请求 token验证
<p>angualr的token 验证会经常用在登录，注册等地方</p><p>对于token的使用方法按照以下步骤进行使用即可</p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">1.</span></strong>新建一个服务 </p>
<p> <span style="background-color: rgba(136, 136, 136, 1)"><strong> ng g service services /+服务名</strong></span></p>
<p><strong> </strong><span style="color: rgba(255, 0, 0, 1)"><strong>eg</strong>：</span><strong>ng g service services/player</strong></p>
<p>会在根目录下出现一个叫service的服务文件夹</p>
<p>文件夹中会存在一个<span style="color: rgba(255, 0, 0, 1)">player.service,ts</span>和一个<span style="color: rgba(255, 0, 0, 1)">player.service,spec.ts</span></p>
<p> </p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">2.</span></strong>在根目录下新建一个文件夹，是用来封装token的写法 </p>
<p>eg: 文件夹的名字为<span style="color: rgba(255, 0, 0, 1)">utils</span></p>
<ol>
<li><strong><span style="background-color: rgba(136, 136, 136, 1)">在文件夹中新建一个名字为token.util.ts的文件</span></strong></li>
<li><strong><span style="background-color: rgba(136, 136, 136, 1)">打开此文件</span></strong></li>
<li><span style="background-color: rgba(136, 136, 136, 1)"><strong>在此文件中注入并声明 import {Injectable,BgModule} from '@angular/core'</strong></span></li>
<li><strong><span style="background-color: rgba(136, 136, 136, 1)">声明引入的组件模块 @Injectable() @NgModule()</span></strong></li>
<li>开始进行封装</li>
</ol>
<p> <span style="background-color: rgba(136, 136, 136, 1)"><strong>export default class TokenUtil{ </strong></span></p>
<p><span style="background-color: rgba(136, 136, 136, 1)"><strong> private name:string = 'jwt-token'</strong></span></p>
<p><span style="background-color: rgba(136, 136, 136, 1)"><strong> getToken():string {</strong></span></p>
<p><span style="background-color: rgba(136, 136, 136, 1)"><strong> return localStorage.getItem(this.name)</strong></span></p>
<p><span style="background-color: rgba(136, 136, 136, 1)"><strong> }</strong></span></p>
<p><span style="background-color: rgba(136, 136, 136, 1)"><strong> setToken(token:string):void{</strong></span></p>
<p><span style="background-color: rgba(136, 136, 136, 1)"><strong> localStorage.setItem(this.name,token)</strong></span></p>
<p><span style="background-color: rgba(136, 136, 136, 1)"><strong> }</strong></span></p>
<p><span style="background-color: rgba(136, 136, 136, 1)"><strong> }</strong></span></p>
<div><strong><span style="color: rgba(255, 0, 0, 1)">3.<span style="color: rgba(0, 0, 0, 1)">在app目录中新建文件夹http-interceptors</span></span></strong></div>
<div>
<ul>
<li><strong><span style="color: rgba(255, 0, 0, 1)"><span style="color: rgba(0, 0, 0, 1)">在此文件夹中新建index.ts文件和noop-interceptor.ts文件</span></span></strong></li>
<li><strong><span style="color: rgba(255, 0, 0, 1)"><span style="color: rgba(0, 0, 0, 1)">在index.ts中写入</span></span></strong></li>
</ul>
<p> /* "Barrel" of Http Interceptors */</p>
<p> import { HTTP_INTERCEPTORS } from '@angular/common/http';</p>
<p> import { NoopInterceptor } from './noop-interceptor';</p>
<p> /** Http interceptor providers in outside-in order */</p>
<p> export const httpInterceptorProviders = [</p>
<p> { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },</p>
<p> ];</p>
<ul>
<li class="_mce_tagged_br"><strong>在noop-inter-interceptor.ts文件中写入</strong></li>
</ul>
<ol>
<li class="_mce_tagged_br"><strong><strong>先引用注入</strong></strong>
<div>import TokenUtil from '../../utils/token.util'</div>
</li>
<li>
<div>import { AppRoutingModule } from './app-routing.module';</div>
</li>
<li>
<div>@Injectable()</div>
</li>
<li>
<div>
<div>export class NoopInterceptor implements HttpInterceptor {</div>
<br>
<div> constructor(private tokenUtil: TokenUtil) { }</div>
<br>
<div> intercept(req: HttpRequest<any>, next: HttpHandler)</div>
<div> {</div>
<div> // Get the auth token from the service.</div>
<div> const authToken = this.tokenUtil.getToken();</div>
<br>
<div> // Clone the request and replace the original headers with</div>
<div> // cloned headers, updated with the authorization.</div>
<div> const authReq = req.clone({</div>
<div> headers: req.headers.set('Authorization', `bearer ${authToken}`)</div>
<div> });</div>
<br>
<div> // send cloned request with header to the next handler.</div>
<div> return next.handle(authReq);</div>
<div> }</div>
<div>}</div>
</div>
</li>
</ol></div>
<div>
<ul>
<li><strong><strong><span style="color: rgba(255, 0, 0, 1)"><span style="color: rgba(0, 0, 0, 1)">在app.module.ts中引用和注入新建的一系列文件 TokenUtil 和</span></span></strong></strong><span style="color: rgba(255, 0, 0, 1)"><span style="color: rgba(0, 0, 0, 1)"> </span></span><strong>httpInterceptorProviders </strong>组件<strong><span style="color: rgba(255, 0, 0, 1)"><span style="color: rgba(0, 0, 0, 1)"><br></span></span></strong></li>
<li>在<strong>@NgModule中的imports中</strong>声明一次 </li>
</ul>
<ol>
<li>TokenUtil </li>
<li>ReactiveFormsModule</li>
</ol>
<ul>
<li><strong>在<span style="text-decoration: underline; color: rgba(255, 0, 0, 1)">providers</span>中进行一次（使用）</strong></li>
</ul>
<div> providers: ,</div>
<p> </p>
</div>
<p><strong><span style="color: rgba(255, 0, 0, 1)">4.</span></strong>在对应的组件中ts中进行一次使用 服务引用</p>
<div> <strong>import { PlayerService} from '../../player.service';</strong></div>
<div> </div>
<div>
<div><strong> constructor(private tokenUtil: TokenUtil, private route: ActivatedRoute)</strong></div>
<div> </div>
</div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<p> </p><br><br>
来源：https://www.cnblogs.com/rockyjs/p/11857991.html
頁:
[1]