路由导航守卫

通常Vue项目都需要设置路由导航守卫，在进入特定页面之前需要进行某些操作，例如下面的普遍需求：

1. 通用页面不需要登录，直接放行
2. 特定页面需要登录才能访问，如果未登录时访问这些特定页面，自动跳转到登录页面，登录成功后再跳转到特定页面；
3. 登录状态下，有些特定页面还需要根据用户权限决定能否访问；
4. 程序运行，自动跳转到登录页面，但是如果用户上次登录后还没有退出，想跳过登录页直接进入首页
5. 还有一些其他的需求，例如上一个页面打开了视频流，离开这个页面时需要将该流关闭

针对上面的第二点和第三点，可以在配置路由时，加上meta字段，然后在导航守卫中根据meta中的值配合使用，例如下面的代码

{ path:'/admin/user', component: UserList,meta: { requireAuth: true ,roles:['admin']} }

meta是一个对象属性，“requireAuth”表示需要登录才能访问某些页面，"role"表示特定角色才能访问某些页面

// 访问特定页面需要路由导航守卫
router.beforeEach((to, from, next) => {
  // 关闭 视频设置 中打开的摄像头
  if (from.path == "/setting/video") {
    if (window.stream) {
      window.stream.getTracks().forEach(track => {
        track.stop();
      });
    }
  }
  
  if (to.matched.some(record => record.meta.requireAuth)) {
    // 如果token存在，说明已登录
    if (window.localStorage.getItem('token')) {
      // 将保存在本地的账户取出来
      /* 将JSON格式数据转换为json对象，主要有两种方式：1、json.parse();2、eval('('+jsonData+')')
        1、 如果控制台输出[object object]就可能是json格式数据，还有可能输出对象时前面加了字符串
        2、 控制台出现Unexcepted token o in JSON错误 ：在本来就是json对象类型的数据外面还加了一层JSON.parse()转换，
            JSON.parse()是用来将字符串解析成json对象的，如果本来传入的就是一个OBJECT，它就会默认使用toString转化为string类型，即"[object object]"
            它将第一个字符[理解成数组，后面的字符o就不知道该如何转换了，所以就报错了
      */
      // let getAccount = (window.localStorage.getItem('account'))
      let getAccount = JSON.parse(window.localStorage.getItem('account'))
      store.commit("setLoginAccount",getAccount)
      let getAccountAvatar = window.localStorage.getItem('avatar')
      store.commit("setLoginAccountAvatar",getAccountAvatar)
      
      // 特定角色才能访问的页面
      /* if (to.matched.some(record => record.meta.roles)){
        // role角色判断
        if (getAccount.role === to.meta.roles[0]) {
          next()
        }else{
          next({
            path:'/error'
          })
        }
      } else {
        // 已登录用户直接放行
        next();
      } */
      next();
    } else {
      // 未登录用户要访问直接跳转到登录页面
      message.info("您还未登录，无法访问该页面，请先登录！")
      next({
        path: '/',
        // 添加query是为了登录完成之后自动跳转到该页面
        query:{redirect: to.fullPath}
      })
    }
  } else {
    // 此处是判断用户上次是否退出
    if (window.localStorage.getItem('token')) {
      // 将保存在本地的账户取出来
     let getAccount = JSON.parse(window.localStorage.getItem('account'))
     store.commit("setLoginAccount",getAccount)
     let getAccountAvatar = window.localStorage.getItem('avatar')
      store.commit("setLoginAccountAvatar", getAccountAvatar)
      // Eden 20-12-22 如果是登录用户，首次进入自动跳到首页
      // 如果判断from.path，那在程序中我想跳到另一个该网站页面又会重定位到'/home'
      // if (from.path === '/login') {
      if (to.path == '/login' || to.path == '/index') {
        router.push('/home')
      }
    }
    // 不需要登录后访问的页面直接放行
    next()
  }

});