前戏
前面我们实现了退出功能，退出之后会清掉浏览器里保存的 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'
重启启动项目，测试，通过
