Vue中的导航守卫

讲的不好的地方，多多理解，

单单看看下面的讲解，可能是看不懂我在说什么，因为需要一点前置知识：vuex,路由，vue脚手架,token

路由权限：访问

是否有token，token是令牌，因为http跳转，传输是没有状态的，可别拿着后退，前进抬杠，那个是浏览器自带的，具体我也没有了解那么深，（HTTP无状态协议对于交互性场景是没有记忆能力的。前一句网络搜索的，想了解http无协议状态，直接搜索一下，http无协议算是浏览器早期的设定），token算是通行的令牌，身份。

有token，说明它已经登陆过了，如果它特意在url地址栏跳转到登录页，就安排它跳转到主页，
如果不是跳转到登录页，直接放行，随便它自由跳转

没有token，说明没有登录，只能去404页面，或者登录页面，放行，
想要去其他页面，直接强制到登录页

导航守卫直接封装到一个文件里面,src/permission.js(你们随意，我是记录一下自己学的知识)

判断有没有token,再判断是不是登录页面，或者白名单
import router from '@/router'  //路由，因为组件化，模块化开发，分的很细
import store from '@/store'  //来自vuex
router.beforeEach((to, from, next) => {
  //to：即将要进入的目标路由对象（准备到哪个页面），
//from：当前导航正要离开的路由（准备到哪个页面的前一个页面），
//next：放行（让它到指定的页面），这里将页面不太正确，应该是路由，毕竟是路由跳转
  if (store.getters.token) {   //getters,快捷访问，store是vuex里面知识，这里不做讲解
    // 有 token 去登录页 => 首页
    if (to.path === '/login') {
      next('/')  // 这里的/是我router文件中已经做了处理，路由做了重定向
    } else {
      // 有 token 不是去登录页 => 放行
      next()
    }
  } else {
    const whiteList = ['/login', '/404']   //白名单
    if (whiteList.indexOf(to.path) !== -1) {
      // 没 token 允许不登录就查看的, 放行
      next()
    } else {
      // 没 token 其他页面,跳转登录页
      next('/login')
    }
  }
})

第二种写法：
上面写法对于新手不便于理解
const token = store.getters.token
  const url = to.path
  const whiteList = ['/login', '/404']  //白名单
  // 有 token 去登陆页 => 首页
  if (token && url === '/login') {
    next('/')
  }

  // 有 token 不去登录页 => 放行
  if (token && url !== '/login') {
    next()
  }

  // 无 token 在白名单 => 放行  ，includes数组的一个方法
  if (!token && whiteList.includes(url)) {
    next()
  }

  // 无 token 不在白名单 => 登录页
  if (!token && !whiteList.includes(url)) {
    next('/login')
  }


小知识点：  
import router from './store'  //针对的是，
//另一个页面有export default router 导出router,
//可能这个文件不止只导出一个，但是我们只要其中一些

import 'router' //针对的是，另一个页面的文件内容内容全部都导入进来，相当与复制粘贴进来

讲解直接贴代码上，有点费时间，我还特别怕别人不喜欢，哈哈，随便记录一下。