type="primary" :loading="loading" @click="submit('login-form')">{{ loading ? 'Loading...' : '登录' }}

//提交登录表单
 submit(ref) {
      //校验
      this.$refs[ref].validate(valid => {
        if (!valid) return false;
 
        this.error = null;
        this.loading = true;
 
        //发送登录请求
        this.$store.dispatch("createToken", this.model)
          .then(res => {
            if (res.state !== 1) {
              this.error = {
                title: "Error occurred",
                message: "Abnormal, please try again later!"
              };
            }
            this.$router.replace({ path: this.$route.query.redirect ||"/" });
            this.loading = false;
          })
          .catch(err => {
            this.loading = false;
          });
      });
    }
  }

/**
   * 创建新的客户端令牌
   */
  createToken: async ({ commit }, { username, password }) => {
    //请求后台登录接口
    const res = await TokenService.userLogin({
      phone: username.trim(),
      password: password.trim()
    });
 
    console.log(res);
 
    //判断结果不等于1,登录失败
    if (res.state !== 1) {
      return Promise.resolve(res);
    }
 
    //获取到content
    const result = res.content;
 
    //将token保存
    commit(CHANGE_SESSION, {
      accessToken: result.access_token
    });
     
    return res;
  },

import { TokenService, UserService } from "../services";

//登录请求 async ES6语法, 作用: 发送异步请求
export const userLogin =  async (data) => {
 //await 表示等待接收返回的数据
 return await PostRequest(`${process.env.VUE_APP_API_FAKE}/user/login${Serialize(data)}`)
}

/**
   * 获取当前登录用户权限
   */
  getUserPermissions: async ({ commit }) => {
    //1.请求后台 获取当前用户的权限
    const res = await UserService.getUserPermissions();
 
    //2.判断
    if (!res.success) {
      //获取失败直接返回 false
      return res.success;
    }
 
    //3.获取数据成功,取出菜单 与 资源列表
    const { menuList, resourceList } = res.content;
 
    //4.下面的代码 就是在生成树形结构的菜单
    let menus = [];
    const formatMenu = treeData => {
      if (treeData.length > 0) {
        return treeData.map(item => formatMenu(item));
      }
      const result = {};
 
      //shown等于表示可以显示,将内容保存
      if (treeData.shown == 1) {
        result.id = treeData.id;
        result.text = treeData.name;
        result.label = treeData.name;
        result.name = treeData.href;
        result.icon = treeData.icon;
        result.shown = treeData.shown;
      } else {
        return "";
      }
 
      //获取子节点
      if (treeData.subMenuList) {
        result.children = [];
        treeData.subMenuList.forEach(item => {
          formatMenu(item) && result.children.push(formatMenu(item));
        });
 
        if (result.children.length === 0) {
          delete result.children;
        }
      }
      return result;
    };
 
    const memusMap = {};
 
    const splapMenu = treeData => {
      if (treeData.length > 0) {
        return treeData.map(item => splapMenu(item));
      }
      const result = {};
      result.id = treeData.id;
      result.text = treeData.name;
      result.label = treeData.name;
      result.name = treeData.href;
      result.icon = treeData.icon;
      result.shown = treeData.shown;
      result.name && (memusMap[result.name] = result);
 
      if (treeData.subMenuList) {
        result.children = [];
        treeData.subMenuList.forEach(item => {
          result.children.push(splapMenu(item));
        });
      }
      return result;
    };
 
    splapMenu(menuList);
 
    menus = formatMenu(menuList);
    commit(CHANGE_SIDERBAR_MENU, menus);
    return { menus, resourceList, menuList, memusMap };
  },

// 导航守卫 to要访问的url, from从哪个路径跳转过来, next() 放行
  router.beforeHooks.unshift((to, from, next) => {
    //不需要验证直接放行
    if (!to.meta.requireAuth) return next();
 
    //需要验证token,调用 store中的checkToken方法
    store.dispatch("checkToken").then(valid => {
      //判断是否存在token
      if (valid) {
        //发送请求到后台,在后台再次判断token是否存在
        store.dispatch("getUserPermissions").then(res => {
       
          if (!res) {
            //失效 清除token
            store.dispatch("deleteToken");
 
            //跳转到登录页面
            return next({ name: "ToLogin" });
          }
 
          //token正确, 导航到对应的页面
          const { memusMap } = res;
          if (memusMap.Courses && to.name === "Home") {
            return next();
          } else if (memusMap[to.name]) {
            return next();
          } else if (Object.keys(memusMap).length > 0) {
            return next({ name: memusMap[Object.keys(memusMap)[0]].name });
          } else {
            next({ name: "PermissionDenied" });
          }
        });
        return next();
      }
      // unauthorized
      console.log("Unauthorized");
 
      //用户没有登录 跳转到登录页面
      next({ name: "Login", query: { redirect: to.fullPath } });
    });
  });

checkToken: async ({ commit, getters }) => {
    //取出token
    const token = getters.session.accessToken;
 
    if (!token) {
      //不可用
      return Promise.resolve(false);
    }
 
    return Promise.resolve(true);
  },

checkToken: async ({ commit, getters }) => {
    //取出token
    const token = getters.session.accessToken;
 
    if (!token) {
      //不可用
      return Promise.resolve(false);
    }
 
    return Promise.resolve(true);
  },