permission路由

一.路由守卫的介绍

1.全局前置守卫

　　router.beforeEach 

跳转到一个页面之前 执行的钩子函数A---->B A开始跳转 , 还没有到B。

2.全局解析守卫

    router.beforeResolve 

3.全局后置钩子

　router.afterEach 

跳转到一个页面之后执行的钩子函数A-B,已经到了B页面。

4.路由独享守卫

　router.beforeEnter 

进入路由时出发,写在路由的匹配规则那一块。

5.组件内的守卫

beforeRouterEnter:

beforeRouterUpdate:

beforeRouterLeave:

二.nprogress插件的使用

默认导入nprogress插件：这个插件在跳转页面的时候有一个进度条的效果

下载：

npm i nprogress

按需导入方法:

import  成员变量的名字 from 'nprogress'

start和done方法

开启:

nprogress.start()

结束:

nprogress.done()

三.逻辑

怎么判断用户是否登录呢？

可以查看是否有token这个值,如果有这个值，则代表用户已经登录。

if(toekn存在){

if(to.path==='/login'){

如果token存在,想去的页面的是登录也,说明这个时候已经进到了首页,则不能继续访问登录页面,让它回到首页。

next('/')

}

esle{

 已经到了首页,说明它拿到了token,则其它的页面都可以进行访问

f}

}

else{

if(to.path==='/login'){

如果没有token,想去的页面是登录页面,则可以进行访问，没有token也能访问的页面不只是有登录页面,还有比如说:'/404' 注册页面 这些页面没有token也是能继续访问的。

我可以定义一个白名单: let  whiteList=['/404','/login','zhuche']

把上面的写法改造一下,可以用 whiteList.includes(to.path)

}

else{

没有toekn,也就代表没有登录进去,访问除了白名单的页面之外是没有权限的,这个时候我们可以让它返回到next('/login')登录的页面 

}

}