最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

每日速讯：Blazor和Vue对比学习（进阶.路由导航五）：路由守卫

来源：博客园

路由守卫，可以认为是设置在导航源和目标之间的中间件。Vue在代码上，表现为命名约定的钩子（类似于生命周期钩子），而Blazor会更复杂一些。Vue Router的路由守卫功能非常完善，而Blazor则相对简陋。同时，Blazor的路由守卫需要结合生命周期函数和事件，使用起来反而更加复杂。

一、Vue Router的路由守卫


(资料图)

1、Vue Router的路由守卫，大致可以分为三类。它们的调用顺序，如下图所示：

  • 全局守卫，所有导航都会经过，有三个钩子，分别为beforeEach（全局前置守卫）、beforeResove（全局解析守卫）、afterEach（全局后置守卫）
  • 路由守卫，在路由文件的路由route中定义的守卫，导航至宿主路由时会经过，只有一个钩子，beforeEnter（进入路由前）
  • 组件守卫，在组件中定义的钩子，有两个，失活组件中，经过beforeRouteEnter（进入组件前）；激活组件中，经过beforeRouteLeave/onBeforeRouteLeave（离开组件前）。
  • 特殊：还有一个组件守卫，但在同组件不同路径间导航时，如路由/user/:id，从/user/1导航到/user/2时，经过beforeRouteUpdate/onBeforeRouteUpdate（组件更新前）

2、基本使用

（1）在路由文件Router/index.js中，设置全局守卫和路由独享守卫

import { createRouter, createWebHistory } from "vue-router"//路由=========================================================================================================const routes = [  {    path: "/",    name: "index",     component: ()=> import("../views/Index.vue"),  },  {    path: "/student",    name: "student",     meta: { requiresAuth: true }, //meta，称之为元信息，可以标注一些路由的特性，本质上就是一些标记    component: ()=> import("../views/Student.vue"),  },  {    path: "/student-detail",    name: "student-detail",     component: ()=> import("../views/StudentDetail.vue"),    //（3）路由独享守卫***************************************************    //只在进入路由时触发，如从/student-detail/1，导航到/student-detail/2时，不会调用    beforeEnter: (to,from)=>{      console.log("路由独享守卫")    }  }]//路由器========================================================================================================const router = createRouter({  history: createWebHistory(import.meta.env.BASE_URL),  routes})//全局守卫=======================================================================================================//（2）全局前置守卫*******************************************************router.beforeEach((to,from)=>{  //①to为目标路由，from为源路由，可以调用name、path、params、query、meta等信息，如to.meta,from.name等  //②如果返回值为true或undefine，则进入下一个路由守卫；如返回false，则导航停止  //③如返回一个路由对象，可以设置导航转向，如【return {name:"index"}】  console.log("全局前置守卫")  return true  /*④路由权限，可以在全局前置守卫进行，如下所示  if(to.meta.requiresAuth && to.name !== "Login"){    return {name:"Login"}  }  */})//（5）全局解析守卫*******************************************************router.beforeResolve((to,from)=>{  //此时，组件守卫、路由守卫和异步路由均已经解析完成  console.log("全局解析守卫")  return true})//（6）全局后置守卫(钩子)*************************************************router.afterEach((to, from, failure) => {  //严格来说，不能称为守卫，因为此时导航已经完成，无法对导航进行干预  //此时可以完成更改页面标题等辅助功能  console.log("全局后置钩子")})export default router

（2）在组件中设置组件守卫

<script setup>import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";/*（4）组件守卫（进入激活组件前） *如果不是组合式API，还可以调用beforeRouteEnter。 *不能获取组件实例this！因为当守卫执行时，组件实例还没被创建 beforeRouteEnter((to, from)=>{  console.log("组件守卫，进入组件前")})*///（*）组件守卫（组件更新前）// 在当前路由改变，但是该组件被复用时调用。如路径/users/:id，在/users/1和/users/2之间跳转的时候// 在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例thisonBeforeRouteUpdate((to,from)=>{  console.log("组件守卫，组件更新前")})//（1）组件守卫（离开失活组件前）// 在导航离开渲染该组件的对应路由时调用// 与beforeRouteUpdate一样，它可以访问组件实例thisonBeforeRouteLeave((to,from)=>{  console.log("组件守卫，离开组件前")})</script>

二、Blazor的路由守卫

1、Blozor中没有明确提出路由守卫的概念，但可以从路由守卫的角度去理解。目前Blazor提供的路由守卫很简单，主要划分三类：

  • 全局路由守卫：OnNavigateAsync，当新导航发生时执行的回调。
  • 组件路由守卫：由NavigationManager提供，一个是导航正在离开RegisterLocationChangingHandler（方法，参数是一个Func委托），一个是导航已经离开LocationChanged（事件）。
  • 特殊路由组件：：导航等待期间的内容；：可以强制导航离开时进行弹窗确认。
  • 实际上只有三个守卫，执行的顺序为：RegisterLocationChangingHandler > OnNavigateAsync >LocationChanged

2、基本使用：

（1）全局路由守卫OnNavigateAsync，在App.razor根组件中定义

@inject NavigationManager Navigation    ......@code {    private async Task OnNavigateAsync(NavigationContext context)    {        Console.WriteLine("全局守卫"+context.Path);        //可以进行路由转向        //Navigation.NavigateTo("/student");        /*OnNavigateAsync本质上是导航时执行的一个回调，如果在这个回调中执行异步方法，应该在方法中传入context的CancellationToken属性         *如导航到/about，但在异步方法PostAsJsonAsync还在执行时，我们又快速改变了导航地址，此时PostAsJsonAsync不应再执行         *所以传入context.CancellationToken，导航异常变化时，会将CancellationToken的IsCancellationRequest设置为true，取消异步方法        if (context.Path == "/about")        {            var stats = new Stats { Page = "/about" };            await Http.PostAsJsonAsync("api/visited", stats,                context.CancellationToken);        }        else if (context.Path == "/store")        {            var productIds = [345, 789, 135, 689];            foreach (var productId in productIds)            {                context.CancellationToken.ThrowIfCancellationRequested();                Products.Prefetch(productId);            }        }        */    }}

（2）组件路由守卫RegisterLocationChangingHandler和LocationChanged，在组件中定义

//RegisterLocationChangingHandler是非托管资源，LocationChanged是事件，两者在组件销毁时，都要手工释放内存//所以组件必须实现IDisposable接口，然后在生命周期函数Dispose()中释放资源@page "/"@implements IDisposable@inject NavigationManager Navigation首页@code{    //RegisterLocationChangingHandler，导航正在发生前===========================================================    //在生命周期函数OnAfterRender中，调用Navigation.RegisterLocationChangingHandler方法，方法参数为守卫方法    //Navigation.RegisterLocationChangingHandler方法的返回值类型为IDisposable，在组件销毁时，调用Dispose()销毁    //此时导航还未实际发生，可以进行导航停止、转向等操作    private IDisposable? registration;    protected override void OnAfterRender(bool firstRender)    {        if (firstRender)        {            registration = Navigation.RegisterLocationChangingHandler(OnLocationChanging);        }    }    private ValueTask OnLocationChanging(LocationChangingContext context)    {        Console.WriteLine("组件守卫：OnLocationChanging导航正在发生前");        Console.WriteLine(context.TargetLocation); //目标地址        Console.WriteLine(context.HistoryEntryState); //目标地址关联的历史记录状态        Console.WriteLine(context.IsNavigationIntercepted); //是否从链接截获了导航        if (context.TargetLocation.Contains("student"))        {            context.PreventNavigation(); //阻止导航        }        return ValueTask.CompletedTask;    }    //LocationChanged，导航已经发生=============================================================================    //在生命周期函数OnInitialized中，订阅Navigation.LocationChanged事件，事件处理函数为守卫方法    //在组件销毁时，在组件生命周期方法中，移除事件订阅    //此时导航已经发生，可以导航转向操作，但不能停止导航    protected override void OnInitialized()    {        Navigation.LocationChanged += LocationChanged;    }    private void LocationChanged(object? sender, LocationChangedEventArgs args)    {        Console.WriteLine("组件守卫：LocationChanged导航已经发生");        Console.WriteLine(args.Location);//目标地址        Console.WriteLine(args.HistoryEntryState);//目标地址关联的历史记录状态        Console.WriteLine(args.IsNavigationIntercepted);//是否从链接截获了导航    }    //在生命周期函数Dispose中，移除订阅的事件，并销毁非托管资源registration===========================================    public void Dispose()    {        Navigation.LocationChanged -= LocationChanged;        registration?.Dispose();    }}

（3）：导航等待期间的显示内容，在App.razor根组件中定义

    ......            
正在导航中......
    @code {    private async Task OnNavigateAsync(NavigationContext context)    {        await Task.Delay(2000);//通过在全局守卫中延迟2秒，来测试的功能    }}

（4）：强制导航离开时进行弹窗确认，在组件中定义

@page "/"@inject IJSRuntime JSRuntime@inject NavigationManager Navigation//ConfirmExternalNavigation属性，确定当导航到外部地址时的行为，如为true，则会弹窗提示；如为false，则不会弹窗提示，直接导航//ConfirmExternalNavigation属性，无论是true或false，导航到内部地址时，都会弹窗提示Microsoft homepage@code {    private void Navigate()    {        Navigation.NavigateTo("/student");    }    private async Task OnBeforeInternalNavigation(LocationChangingContext context)    {        //直接通过JS交互，调用window对象的confirm弹窗方法        //OnBeforeInternalNavigation回调方法，LocationChangingContext上下文，这个对象和RegisterLocationChangingHandler中的一样        //如果用户在弹窗中选择取消，则调用LocationChangingContext的PreventNavigation方法，停止导航        var isConfirmed = await JSRuntime.InvokeAsync("confirm","确定要离开吗?");         if (!isConfirmed)        {            context.PreventNavigation();        }    }}

关键词： 生命周期 异步方法