angular引入包、路由权限配置、打包问题与nginx配置问题（简单部署）

yma16

已于 2023-07-01 14:26:34 修改

阅读量3.6w

点赞数

分类专栏： linux运维文章标签： angular.js nginx javascript

于 2022-08-08 01:53:44 首次发布

yma16

本文链接：https://blog.csdn.net/qq_38870145/article/details/126220183

版权

linux运维专栏收录该内容

8 篇文章 0 订阅

订阅专栏

angular路由权限跳转

yma16-logo

前言

大家好，我是yma16，本文分享angular引入包、路由权限配置、打包问题与nginx配置问题（简单部署）

angular配置

Angular 配置的主要方式是通过 Angular CLI (命令行接口)。Angular CLI 是 Angular 项目的官方脚手架，其中包含了一些最佳实践和可扩展的功能。

以下是一些基本的 Angular CLI 命令：

创建一个新的 Angular 应用程序：

ng new my-app

cd my-app

启动开发服务器：

ng serve

构建应用程序：

ng build

运行单元测试：

ng test

运行端到端测试：

ng e2e

生成代码：

ng generate component <component-name>

以上是一些常用的 Angular CLI 命令。涉及更多的配置和选项，请参阅 Angular CLI 文档。

思考js和ts

js没有数据类型的规范使用比较粗暴，和人生苦短的python堪比卧龙凤雏.
ts在js的基础之上添加了类型的规范，增强cleanCode和问题排除.
ts还引入他的创始人c++的类、继承和接口的使用，多元化的buff让他在前端界平步青云.

angular对比vue的router

vue存在vue-router，beforeEach初始化是否加载路由
angular存在CanActivate，默认存在且加载路由，在跳转路由会预先判断是否满足

CanActivate接口

对路由跳=跳转时添加前置判断返回true;false
一下是个人结合后端判断角色登录时后是否具有权限的判断逻辑

//路由权限认证

import { CanActivate } from "@angular/router";
import { AxiosService } from '../axios/axios.service'

import { Injectable } from '@angular/core';


@Injectable({

  providedIn: 'root'

})

export class LoginGuard implements CanActivate{
  constructor(public $axios: AxiosService) { }
  async canActivate(){
    console.log('权限配置')
    let loggedIn :boolean= false;
    // 权限配置
    if(!loggedIn){
      console.log("用户未登录");
      let userInfo:object=JSON.parse(window.localStorage.getItem('edit-site-info')||'')
      const url:string='https://yongma16.xyz/api/user/login/'
      await this.$axios.AxiosPost(url,userInfo).then((data:any)=>{
        console.log("axios post 请求: ", data)
        if(data.data.code==1){
          loggedIn=!loggedIn
        }
      })
      // axios.post(url,userInfo).then((data:any)=>{
      //   console.log("axios post 请求: ", data)
      //   loggedIn=!loggedIn
      // })
    }
    return loggedIn;
  }

}

providers声明

providers

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { EditComponent } from './edit/edit.component';

import {LoginGuard} from './guard/login.guard';//权限
// import {UnsaveGuard} from './guard/unsave.guard';//权限
const routes: Routes = [
  { path: 'home', component: HomeComponent ,
    children:[
      { path: 'edit', component: EditComponent },
    ] ,
    canActivate: [LoginGuard]},
  {
    path: '**',
    component: LoginComponent
  }

];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard]
})
export class AppRoutingModule { }

使用axios

加载包

我这里imports ckEditor
加载了providers axios

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';//ckeditor

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { EditComponent } from './edit/edit.component';

import { AxiosService } from '../app/axios/axios.service'

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    EditComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CKEditorModule,
  ],
  providers: [AxiosService],
  bootstrap: [AppComponent]
})
export class AppModule { }

二次利用axios

我这里定义AxiosService类调用get和post

import { Injectable } from '@angular/core';

import axios from 'axios'

@Injectable({

  providedIn: 'root'

})

export class AxiosService {

  constructor() { }

  AxiosGet(api:any) {

    return new Promise((resolve, reject)=>{

      axios.get(api).then((res)=>{
        resolve(res)
      })

    })

  }

  AxiosPost(url:string,data:object) {

    return new Promise((resolve, reject)=>{
      axios.post(url,data).then((res)=>{
        resolve(res)

      }).catch(r=>{
        reject(r)
      })
    })

  }

}

路由跳转的前提和baseUrl的关系

跳转路由

this.router.navigate(['/home/edit/',''])

index.html中的base作为跳转的前置路由拼接

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ckEditor测试</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root id="ng-app"></app-root>
</body>
</html>

部署后的跳转路由

url：href+navigate的路由path参数

nginx部署前端项目

注意点：路由拼接

location /edit-web{
	alias 前端打包文件
	try_files $uri $uri/ /edit-web/index.html;# 循环查找/edit-web统一路由下的前端进行拼接
    index index.html index.htm;
}

结束

本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！

yma16

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
angular引入包、路由权限配置、打包问题与nginx配置问题（简单部署）

浅使用angluar
复制链接

扫一扫

专栏目录

angular引入包、路由权限配置、打包问题与nginx配置问题（简单部署）

angular路由权限跳转

前言

angular配置

思考js和ts

angular对比vue的router

CanActivate接口

providers声明

使用axios

加载包

二次利用axios

路由跳转的前提和baseUrl的关系

部署后的跳转路由

nginx部署前端项目

结束

“相关推荐”对你有帮助么？