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

    angular路由权限跳转

    思考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;
  }

}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    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 { }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    使用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 { }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    二次利用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)
      })
    })

  }

}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

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

    跳转路由

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

    • 1

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    部署后的跳转路由

    url：href+navigate的路由path参数

    nginx部署前端项目

    注意点：路由拼接

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

    • 1
    • 2
    • 3
    • 4
    • 5
  • 相关阅读:
    如何使用C++图形界面开发框架Qt创建一个应用程序？（Part 2）
    自定义子组件的v-model
    外贸软件助力国际贸易企业业财共享数字化转型升级
    Linux服务器性能监控利器-Nmon实战
    Chrome插件开发入门
    图片批量处理：轻松实现图片批量处理：按需缩放图片像素
    pgsql按varchar字段排序
    邓俊辉《数据结构》→ “2.6.5 二分查找（版本A）”之“成功查找长度”递推式推导
    Android: HttpURLConnection获取JSON数据
    基于FPGA的图像二值化处理,包括tb测试文件和MATLAB辅助验证
  • 原文地址：https://blog.csdn.net/qq_38870145/article/details/126220183