00:00
但是你这么写同学有点儿不太好,哎,有一个地方不太完美,哪儿呢,就是这儿。同学你说如果我想对12个切换都做出判断,那你就写去吧,你得在这写吐点内幕,等于这个等于那个,你得写12个判断,你麻不麻烦呀?哎,所以说同学我们得用一个更好的方式,怎么去做呢?那就是给每一个路由配置里面都加上一个特殊的属性,用于标识着本路由是否需要进行权限的校验,就比如说各位你在这不用一点一点判断这个内幕,你这么判断叫做兔,然后呢,有这么一个属性啊,你随便写,比如说佩奇啊,我就问问兔身上的那个佩奇属性为不为真,如果为真意思咋的,就需要校验权限,那我就走一个判断,那如果佩奇的值为false呢?那就是不走权限呗,OK,说老师,那明白了,我加个佩奇就得了呗,我先给这关于加是吧,走老师你看我加一个佩奇值呢为false,意思就是关于这个路由不用进行权限的校验,说老师这么写是不就行了呀,嗯,你。
01:06
看看呗,能不能拿到这个兔点佩奇呢?啊这样做啊,各位回到这个关羽里面,在这个盲培的里面,我做一件事儿,就是输出他身上的那个路由配置,Conslo this.dollar for RO,就是你不要觉得说老师我在这加了个配奇fo就加上了,我跟你讲啊,这叫配置对象,配置对象最大的特点就是里边所写的每一组key value都是按照人家的设计来的,人家100%没有设计配齐,是false,没有设计配齐这个配置项,所以说你写了同学其实也没有用啊,回到这儿呢,你看一下啊,清掉,我点击about啊说老师,哎呦,我的天,这么多输出来在这儿呢,我给你加一个东西做一个分隔啊,在它前边呢,加这么一个东西百分号,好,这回看效果啊,刷新一波,看百分号后面那输出打开各位看吗?有佩齐吗。没有是不,各位,也就是说路由的配置里面不是说你想加什么你就能加什么的,说老师,那我就想加点我自己所独有的数据吗?我就想加那么一个东西配齐,能标识着是否需要权限的校验吗?哎,那同学告诉你往哪放啊,往Meta里放,这个Meta里边专门给你提供了一个容器,就是可以放点你想放的一些特殊的数据,说老师那这个P和query同学,咱又不是没学过这东西,这里边你能随便放东西吗?不能,你得等着你餐的时候,人家帮你把参数塞到这里边去,对不对?哎,只有这个是他免费给我们提供的一个容器,是不随便往里边放东西,我们管这个Meta叫什么呢?叫做路由源信息。
02:41
哎,哪个源呢?这个源路由的源信息,源信息的意思就是程序员,哎所自定义的一些信息,OK,这回就可以了,来回来各位啊,回到这个配置里面怎么写,如果真想写佩奇也行,你得写这个might里边写上佩奇是false,但是同学为啥非得用佩奇呀,多难听啊,用这么一个词叫做a ath,啥意思,是否授权,为啥用这词呢?Ath,因为有一个完整的单词叫做authorization,有授权的意思,OK,哎,这么一写不就得了吗?但如果说这个关于啊,确实不需要做那个权限校验,你可以连他写都不写是不?各位写都不写,那一会儿你拿的时候怎么着,那就拿不出来呗,是吧,拿不出来就是de呗,Unde就为假呗是不?各位啊,咱先验证一下,我这么写完了之后啊,他能不能正常的出来啊,肯定是能的,各位你打开这个走麦里边是不是有A是false了,OK,来吧各位,把这个东西给他带走啊,不放在这儿,谁需要权限的校验。
03:42
我是不是放在谁那儿啊,那谁需要啊,一个是新闻,一个是message啊,来在这儿呢,放一份,这不新闻的吗?这就得调为。复制过来再找谁找那个消息去写在这儿逗号啊,没错,OK同学,那意思就是这两个东西需要权限的校验,那在这儿同学别吐点配齐了,你告诉我咋写吐点me.a字奥,如果需要去健全啊,去控制这个权限,那就走呗,啊在这儿写好判断叫做控制,或者说判断是否需要健全,嗯,鉴定一下是否需要权限,OK,来看一下效果啊,回到最开始的样子。
04:26
About,能看,后面能看,我想看看news不行,没有权限message不行,你这样写的话觉不觉得很简单啊,谁需要配置权限,直接去配置it就可以了。OK,那我们刚才说的是前置路由首位切换被调用,而且是每一次路由切换前都被调用,那么有前置路由首位你猜也能猜得到,就得有什么呢?后置路由首位对吧?各位把笔before改为这词a after啊,然后在这呢,同学还是调用还是呢,传入一个函数说老师,那我明白了啊,肯定还是这三个东西对吧?进行一个输出conslo啊,那在这呢,前边我加一个before each,让你知道是前置路由首位啊,直接写中文吧,前置路由守位,把这个呢复制放在这儿,叫做后置路由守位,然后呢,还是输出这三个东西啊。
05:26
是不是觉得也是这三个东西啊,嗯,来咱看看吧,啊各位先说一下吧,它什么时候调用啊,这一堆全都复制往这一走,把钱改成后啊,初始化的时候被调用没毛病,每次路由切换之后被调用,来看一下效果啊,回到页面,从最开始出发走着,一上来同学他是不是掉它是也掉,你发现一上来的东西前置路由守卫,刚才我们说过了,To和from长得一样。最主要的是吧,它跟后置路由里面一上来那个to和from,嘿,长的也一样,所以说一上来这些东西没啥营养,清掉我想看about,注意观察,走前置路由守位先执行啊切换前去执行吗?啊发现诶经过一些判断可以放行,随后呢,后置路由守卫在切换完了他再执行,同学,这是谁to这是谁from那这是谁to那这是谁from哎,往下看各位,这有一个不太和谐的人谁呀?Andy find这咋回事啊?
06:29
那就证明啊,你这个东西next是没有的,同学,为啥没有?为啥后置路由首位没有next,谁能解释解释?很简单吧,各位,你说前置路由首位是切换前调用的,那切换前你就得给我一个方式去控制能不能往下走,那谁呢?Next?哎,说白了,切换前我先拦住你,走不走,你就看我掉不掉next,但如果说各位,你这个切换已经完成了,你觉得人家再给你这个next有什么用吗?
07:01
就没有用了,就是这事已经完成了,你说对吧,各位,哎,就有点什么感觉呢,你家呀,请来两个保安啊,一个是站在你家大门口,一个呢是站在你家屋里,那你说如果门口那个已经放行了,那等你再进来的时候,里边这保安他只是服务你了,他不会再问你了,说把你的权限再给我出示一下,不可能的了,是不?各位,因为这时候为时已晚了,我切我都切完了,你还守卫个什么劲儿呢是不?所以说没有next了,没有next那就有些同学说老师。那我觉得这个后置路由守卫不就是个马后炮吗?人家切都切完了,完他在这儿大摇大摆的过来了,哎呀,我是后置路由守卫,说老师,那他能守卫个什么呢?他守卫个寂寞,他连next都没有,他怎么守卫是不?各位,从某种程度上来说,我得有next,我才有资格去守护一个路由,是不是我才能控制,但你这连这都没有了,诶同学,这个后置路由守位吧,用的确实不多,但是它也有一些自己的作用,它有什么作用呢?来各位,我先把它注掉,加一个功能,就是一般来说呀,好一点的项目呢,它都会做这么一个功能啊各位,就是你点击about的时候,来咱从头开始说啊,一上来的时候啊,这块确实是你正常的那个项目的名字,View test完了,当你点击about的候,各位,他把页签的这个title啊,这个标题给变了啊,一个汉字叫关于啊,一个词儿是吧,然后在这呢,你点击后面的时候,这块也变一个词叫主页,哎,是有一个。
08:30
联动效果的,你点击news,哎,当然我没进来是吧,来我让他进来把我这学校啊改一下,不是艾特硅谷二了,是艾特硅谷来这回再测试一下,诶就让看了,这回呢也让看了,你点击messages,这得变成消息,点击news,这得变成新闻,哎,我就想实现这么一个功能啊,首先回顾一下用JS怎么去切换这个东西,很简单,document.title是不是就可以?哎,所以说回来各位你可以借助这个前置路由首位啊,写这么一个东西,就是找到那个文档对象document,找到那个title,哎,给它改一下,改成什么呢?
09:07
哎,说老师我改成这个改成这个哈哈啊来保存一下,嗯,回到这看已经有效果了啊哈哈,那你这么写的意思就是一上来就哈哈呗,然后点谁都是哈哈呗,你这可不对是吧,各位你得是点谁就是谁的名字,所以说在这儿不要写死那怎么办?也就是说每一个路由都有自己对应的title头标题,那怎么办?来吧,各位别客气了,给每一个路由里边都存点独有的信息,就是me路由源信息,把这个title给它配置好,比如说关于就直接写汉字关于,OK,把这些给它复制,找到主页这个里面走着来一个小逗号,这块换叫做主页,那同理,里边的这些是不是都得换呀?但是在这的同学不要把这a off给搞丢,否则授权不就丢了吗?啊,放在这儿走,然后这这儿换个词儿啊,叫做新闻,好把这个复制往下放,放在这儿名字呢,还得改,叫做消息,当然得是汉字的好,再往下,接下来这儿还得写一个叫做详情,那我就把这也加上吧,各位走着啥意思啊,详情也得做权限的校验啊,那这块换一下叫做详情,OK,这就写完了吧,每一个路由都有title了,那把这折叠起来,接下来你。
10:26
知道怎么写了这儿啊,删掉咋写to点儿me点儿谁呢title这不就得了吗?来看一下效果啊,各位点击后就主页,你看已经有效果了,点击about就关于啊,那如果点击的是news就是新闻,Message就是消息,对吧?哎,说老师好嘞,我这就写完了呀,嗯,你写的不对呀,有bug,首先这是各位一上来是安迪范的,为啥?你配置的时候,各位你是给每一个能切换的路由,关于啊主页啊,你配置了title,但是一上来的这个东西,哎,这个斜杠对吧,路径为斜杠,这个你是不是没有配置啊,哎,说老师那怎么办呀,很简单呀,在这写这么一个东西就得了呗,往下找,找到这儿如果有抬头我就用,那如果没有title呢,那随便写一个别的东西呗,比如说叫做什么呢?啊什么这个硅谷系统可以不?哎,那这回一上来你看什么也不点,就硅谷系统呗,点这儿呢,那就关于点这儿呢,那就主页呗,但是这么写吧,其实还有一个小问题,各位你仔细观察这个区域啊,仔细观察来。
11:33
咋了,我再刷新,你仔细观察,有一瞬间其实他还是来,我用画笔呢,给你卡一下啊各位。卡早了,再来一下,诶同学,有那么一瞬间它还是view test是不?这是怎么回事啊?说一下啊,各位,如果你真想改啊,你得改这儿就是默认的那个啊,就是public里面不是有一个index attl吗?这里边配置的不是title吗?但是你看他这同学之前我们就说过这个title头咋的不是他写死的,它也是读取了package.jason中的这个你的项目名VI test,然后就作为整个页面的什么呢?Title,如果你真想改,你得把这儿啊改一下叫什么硅谷系统就可以了,也就是说你这儿得叫硅谷系统,然后在这儿呢,得跟它一起怎么办?来往下看,在这儿给它配置上是不说是咋改,很简单,就这呢,不要了,不让他读了是吧,他写的挺好的,说读出项目名就是我的开头名,改呗,硅谷系统就得了呗,各位啊,来到这儿刷新一波,你看没有那个抖动的效果了,然后你点谁呢就是谁,诶说老师这就写好了呀,不对,还有bug。
12:38
还有什么bug呢?来,各位瞧治啊,走,艾特硅谷啊二我这一改不要紧,哥们儿,我看不了news和message了,对吗?来,你注意观察啊,目前我点的是home,所以叫主页,接下来同学注意看,我去点击新闻,走,他告诉我学校名不对,无权查看。那好吧,各位看这儿咋啦?
13:00
他改了,说老师,路径没变,路径同学,你这守位不就有这职责吗?路径就应该不变的对不对?守卫在那看着呢吗?但是这你觉得合适吗?啊,来这儿新闻不太合适吧,你点击message告诉你啊,无权查看结果呢,这会儿还跟着变叫消息,那看这儿呢,还叫新闻,你觉得这合适吗?不合适,所以说各位咋的,你在这儿直接改啊,你改早了。有可能出现这个情况,不能往下走,那就不能拿着他的title就直接改掉文档的title,那怎么办呀,说老师那简单,我把它呀放在这里边儿,这不就得了吗?这回更费来,你看着吧,各位一上来是不硅谷系统点击about。点击home变吗?不变,为啥?因为这两个路由不需要去进行权限的判断,简称健全是吧,不需要,那怎么办呀,各位,那你写在这肯定不行,人家的逻辑是如果需要健全我再走这个,那你逼着你没办法,你只能把这东西咋的,是不是放在这儿了?哎,说老师,那这回写就行了呗,其实还是有点小问题的,你看啊,来是这行了,关于在这儿,你看呢,我点击news。
14:07
啊,不对,你看这不还是变吗?哎,说老师这咋回事啊,同学,你又写早了,你得把这东西再往里挪,同学,挪到哪儿是最稳的,我告诉你就是放行之前说我接下来我要放行了,那啥意思?就是真能往下走了,那你要真能往下走了,那我就不客气了,我就直接把你的抬头就改掉了,是吧?各位哎,你得写两遍,这一遍这一遍,每次放行之前你都得写一遍,对不对,这回才完美来,从头开始走,一上来硅谷系统关于主页,我想看看新闻啊,无权限啊,那算了吧,这块也不变,我想看看消息啊,无权限,算了吧,这块也不变是不?各位贼问,但你这么写,我问你,你写了几遍,一遍两遍不太合适吧?诶,但如果你借助这个后置路由首位,那就简单了呀。各位,这个逻辑只写一次,这删掉,这删掉,我就往这一写就完事儿。说老师是不是得写点判断,不用判断啥的,逻辑都在这儿呢,同学我就问你,他如果能走,这意味着什么,如果能走,这就意味着切换肯定切完了,为啥切完了一定这块判断完了,所以说咋的一旦切换完了之后咋的你给他改一下不就得了吗?来看一下效果啊,我只写了一次这个逻辑,来从头开始看一上来硅谷系统走,关于走什么呢?主页啊,然后这儿呢,新闻啊,无权查看,那算了吧,这儿呢也不变对不?你点这个,诶关于就能变了是不?各位啊,那有些同学说,诶老师啊,那你这么写慢的,感觉刚才写在这能快一点啊,我一点立刻就有效果了,那在这我还得等他跳转完了,然后再在这儿,那同学你想写的稳,你的时机就得往后靠,你说对不?诶,OK,说完了全局的前置路由守位,还有后置路由守位,一个是切换前调用,一个是切换之后进行调用,OK,全局在哪体现我整个对这个roer说话的任何一次路由的切换之前。
16:00
都走这个切换之后呢,都走这个啊,什么叫前置切换前调用,什么叫后置切换后调用?OK,回到笔记里总结一波各位路由守位的作用就是对路由进行权限的控制,不是说我们刚开始上来开玩笑说这个保护路由的安全是吧?各位,哎,其实就是我想让你看哪个,我不想让你看哪个,那么分类呢,它有全局的啊首位,还有独享的首位,还有组件内的首位,当然这两个我们还没讲呢,一会儿讲是吧,全局首位来过一遍,各位用这个API,前置的后置的呢,用这个就可以了啊,一般来说就是对权限进行一些控制啊,你需不需要进行权限控制,然后进行权限控制的条件是什么?是不?各位我在这儿呢,写的就有点儿low,我只是把一个学校的名字存进去了,如果要是真实开发呢,各位你是不是得存点用户的信息啊,得是用户登录成功了之后,里边存的一些什么用户的token什么之类的,对不对啊,说老师啥是token啊,听完咱上硅谷的项目,你就知道啥是token了是不?各位啊,在这。
17:00
我只是做一个演示,要不咋说呢,各位你学完了这一小节,只是说啊,你会用了这些API,你还没有完整的做出来一个登录注册的这么一个项目,所以说同学学完任何技术,一般来说都得匹配一个项目,也强烈建议大家听完咱们这个V基础,去看看上硅谷的VI项目这个课程,OK,好了,各位,那这小节呢,我们听。
我来说两句