angular路由权限跳转
前言
大家好,我是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;
}
结束
本文分享到这结束,如有错误或者不足之处欢迎指出,感谢大家的阅读!