路由拦截器router.beforeEach的使用

项目用户方提供一个链接包含用户的姓名身份证号，我们的后台根据用户方提供的链接生成用户的唯一token识别码，后台把这个token码拼接到了项目的url地址后面

前端要做的业务就是取到用户的token，并且进行存储以及axios的请求地址拼接。

整体的思路就是，在前端的路由拦截器beforeEach中，通过query传参取到当前的地址后拼接的url,判断token是否是否存在，存在的话进行cookie的存储，以及路由的放行，要保证页面跳转后地址栏后面不再有token的拼接的情况下，后面放行的页面直接next(to.path)，除了判断地址栏后是否有token存在的情况下，还需要判断cookie中是否有token的存在看看是否存成功了，有的话， 就说明是进入到了首页或者其他的页面，直接放行就ok，没有token的情况下，就return出去并且进行提示

Router.beforeEach((to, from, next) => {
  // debugger
  let token = to.query.token
  if (token) {
    setToken(token)
    next(to.path)
  } else if (getToken()) {
    next()
  } else {
    MessageBox.confirm(
      '会话已过期',
      '系统提示', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        type: 'warning',
        showClose: false,
        showCancelButton: false,
        center: true
      }).then(() => {
      window.location.href = localStorage.getItem('return-Url')
      removeToken()
    })
    return
  }
})

export default Router

若想在其他页面用到地址栏中的参数

可以对地址栏的参数先进行存储保存，再在其它页面进行获取使用

  let token = to.query.token
  if (JSON.stringify(to.query) != "{}") {
    localStorage.setItem('dataQuery', JSON.stringify(to.query))
  }

在进行cookie存储token的同时，需要前端判断设置token的过期时间，cookie自带过期时间的设置

const cookieExpires = new Date(new Date().getTime() + 30 * 60 * 1000) 
//30分钟过期，30乘以60是1800秒，再乘以1000，换算成时间戳加上最新的时间戳

export const setToken = (token) => {

  Cookies.set(TOKEN_KEY, token, {

    expires: cookieExpires

  })

}

cookie字段如果不设置expires，随着浏览器关闭，cookie失效

如果cookie存储时间大于1天，直接expires:30 后面加天数即可

如果存储时间小于1天，expires填写时间，

var millisecond = new Date().getTime();

var expiresTime = new Date(millisecond + 60 * 1000 * 15);

如果设置的时间是过去的时间，那么立即失效

 对路由前置的理解，

路由前置next()方法是对页面放行的意思

当next('/home'),配置参数时，路由前置就会执行2遍，第二步执行beforeEach是跳转页面时的路由拦截