Vue--系统权限拦截

前戏

前面我们实现了退出功能，退出之后会清掉浏览器里保存的 token ，并且会返回到登录页面，让我们登录，但是有一个问题，当我们退出之后，访问首页，或者会员的 URL ，都是可以访问到的，这是因为虽然我们退出掉，并清理掉 token，但是我们访问其他页面是不需要token的，所以我们在访问非登录和注册页面的话，可以先校验下浏览器里是否有token，如果有，在进入到对应的页面，如果没有，则返回到登录页面，让用户进行登录。

我们可以采用 Vue Router中路由得前置钩子函数（beforeEach），在前置中根据路由地址校验此路由是否允许访问。

Vue Router中的前置钩子函数beforeEach(to, from, next)当进行路由跳转之前，进行判断是否已经登录过，登录过则允许访问非登录页面，否则，回到登录页面

• to：即将要进入的目标路由对象
• from：即将要离开的路由对象
• next：是一个方法，可以指定路由地址，进行路由跳转

实现

在src根目录下新建 premission.js 文件，写入如下代码

// 权限校验，要在main.js文件里导入才会有效

/*
Vue Router中的前置钩子函数beforeEach(to, from, next)
当进行路由跳转之前，进行判断是否已经登录过，登录过则允许访问非登录页面，否则，回到登录页面
to：即将要进入的目标路由对象
from：即将要离开的路由对象
next：是一个方法，可以指定路由地址，进行路由跳转
*/

import router from './router'  // 所有的路由跳转都是在这个里面的
   // 获取校验token的接口，自己实现

router.beforeEach((to, from, next)=>{
    // 获取token
    const token = localStorage.getItem('zz-token')

    if(!token){
        // 如果没有获取到，要访问非登录页面，则不让访问，回到登录页面 /login
        if(to.path == '/login'){
            next() // 等价于 next({path: '/login'})，会自动获取到上面的路由 
        }else if(to.path == '/register'){
            // 
            next({path: '/register'})
        }else{
            // 请求登录页面

            next({path: '/login'})
        }
    }else{
        // 获取到token，
        // 请求路由是/login，则去目标路由
        if(to.path === '/login'){
            next()
            // 请求路由是/register，则去register
        }else if(to.path === '/register'){
            next()
        }
        else{
            // 请求路由非登录页面,直接进入，不严格，可以将token发送到服务器进行验证
            next()
        }
    }
})

这样只是写好了，还没有引用，要想要生效必须先引用，在同级的 main.js里写入下面两行代码

// 权限拦截，全局的
import './premission'

重启启动项目，测试，通过