利用導航守衛beforeEach 配合routers的meta屬性 進行權限設置

使用beforeEach實現權限設置，和上節用Vue-Router 的 beforeEach屬性 實現路由導航守衛用法基本一樣，知識需要在路由routers添加一個meta屬性，對用戶類型進行判斷就可以了

直接上代碼：

const router = new Router({
  routes: [{
    path: "/",
    name: "login",
    component: login
  },
  {
    path: "/Teacher",
    name: "Teacher",
    meta: {
      admin: true,
      teacher: true,
      student: false
    },
    component() {
      return import(/* webpackChunkName: "Teacher" */ "./views/Teacher/index.vue");
    },
    children: [
      // 這裏寫教師端的子頁面
      {
        path: "/Teacher/userlist",
        name: "userList",
        meta: {
          admin: true,
          teacher: true,
          student: false
        },
        component() {
          return import(/* webpackChunkName: "userList" */
            "./views/Teacher/user_manage/index.vue"
          );
        }
      }
   }
}

router.beforeEach((to, from, next) => {
  const cookieData = getCookie("SignInstate"); // cookie賦值給變量, 判斷登錄否
  if (to.name === "login") {
    if (cookieData === "true") {
      // 普通判斷是否登錄
      const TOKEN = JSON.parse(localStorage.dcaw_token);

      if (TOKEN.role === "admin" || TOKEN.role === "teacher") {
        next({
          path: "/Teacher/experimentManage"
        });
      } else if (TOKEN.role === "student") {
        next({
          path: "/Student/practice"
        });
      }
    } else {
      next();
    }
  } else if (cookieData === "false") {
    // if (to.name ==='forgetpassword') {
    //  next()
    // } else {
    next({
      path: "/"
    });
    // }
  } else {
    const TOKEN = JSON.parse(localStorage.dcaw_token);
    if (to.meta[TOKEN.role]) {    // to 所指向的meta屬性的對應的登錄用戶類型
      next();
    } else {
      // eslint-disable-next-line no-alert
      alert("暫無訪問權限");
      return;
    }
  }
  if (localStorage.getItem("checked") === "true") {
    const TOKEN = JSON.parse(localStorage.dcaw_token);
    if (to.name === "login") {
      if (TOKEN.role === "admin" || TOKEN.role === "teacher") {
        next({
          path: "/Teacher/experimentManage"
        });
      } else if (TOKEN.role === "student") {
        next({
          path: "/Student/practice"
        });
      }
    }
  }
});