/**
 * 定义组件属性的类型
 */
interface Props {
  value: string;
  mode?: string;
  handleChange: (value: string) => void;
}

import { defineProps, withDefaults } from "vue";

// 设定默认值
const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  mode: "split",
  handleChange: (value: string) => {
    console.log(value);
  },
});

const form = ref<QuestionAddRequest>({
  answer: "",
  ....
});

const onAnswerChange = (v: string) => {
  form.value.answer = v;
};

export default {
  namespaced: true,
  state: () => ({
    loginUser: { // 初始化状态
      userName: "未登录",
    },
  }),
  actions: {
    async getLoginUser({ commit, state }, payload) {
      // const products = await
      const res = await UserControllerService.getLoginUserUsingGet();
      if (res.code === 0) {
        commit("updateUser", res.data); // 如果登录成功，那么保存后端传递过来的值
      } else {
        commit("updateUser", { // 如果登录失败，把用户的权限状态设定为未登录
          ...state.loginUser,
          userRole: ACCESS_ENUM.NOT_LOGIN,
        });
      }
    },
  },
  mutations: {
    // 修改状态变量的
    updateUser(state, payload) {
      state.loginUser = payload;
    },
  },
} as StoreOptions<any>;

// 处理登录请求
const handleSubmit = async () => {
  const res = await UserControllerService.userLoginUsingPost(loginForm);
  if (res.code === 0) {
    await store.dispatch("user/getLoginUser"); // 这一步，存储用户的登录状态
    Message.success("登录成功");
  } else {
    Message.error("登录失败" + res.message);
  }
};

// 定义路由信息
export const routes: Array<RouteRecordRaw> = [
  {
    path: "/view/question/:id",
    name: "在线作题",
    component: ViewQuestionsView,
    props: true,
    meta: {
      hideInMenu: true,
      access: AccessEnum.USER,
    },
  },
];

const ACCESS_ENUM = {
  NOT_LOGIN: "notLogin",
  USER: "user",
  ADMIN: "admin",
};

export default ACCESS_ENUM;

import ACCESS_ENUM from "@/access/accessEnum";

const checkAccess = (loginUser: any, needAccess = ACCESS_ENUM.NOT_LOGIN) => {
  const loginUserAccess = loginUser?.userRole ?? ACCESS_ENUM.NOT_LOGIN;
  // 获取当前用户具有的权限,没有loginUser表示未登录
  if (needAccess === ACCESS_ENUM.NOT_LOGIN) {
    return true;
  }
  if (needAccess === ACCESS_ENUM.USER) {
    // todo 只需要判断登录就可以
    console.log(">>>>", loginUserAccess);
    if (loginUserAccess === ACCESS_ENUM.NOT_LOGIN) {
      return false;
    }
  }
  if (needAccess === ACCESS_ENUM.ADMIN) {
    // 需要管理员权限但是不为管理员
    if (loginUserAccess !== ACCESS_ENUM.ADMIN) {
      return false;
    }
  }
  return true;
};

export default checkAccess;

import router from "@/router";
import store from "@/store";
import ACCESS_ENUM from "@/access/accessEnum";
import { routes } from "@/router/routes";
import checkAccess from "@/access/checkAccess";

router.beforeEach(async (to, from, next) => {
  let loginUser = store.state.user.loginUser;
  // 如果之前没有登录过，或者之前登录过可以进行自动登录
  if (!loginUser.userRole) {
    await store.dispatch("user/getLoginUser");
    loginUser = store.state.user.loginUser;
  }
  // 如果这个页面不需要访问权限
  const needAccess = (to?.meta?.access as string) ?? ACCESS_ENUM.NOT_LOGIN;
  if (needAccess !== ACCESS_ENUM.NOT_LOGIN) {
    if (
      loginUser.userRole === ACCESS_ENUM.NOT_LOGIN ||
      !loginUser ||
      !loginUser.userRole
    ) {
      next(`/user/login?redirect=${to.fullPath}`);
      return;
    }
    if (!checkAccess(loginUser, needAccess)) {
      next("/noAuth");
      return;
    }
  }
  next();
});

watch(
  () => props.language,
  () => {
    monaco.editor.setModelLanguage(
      // 踩坑一定要使用toRaw
      toRaw(codeEditor.value).getModel(),
      props.language
    );
  }
);

onMounted(() => {
  if (!codeEditorRef.value) {
    return;
  }
  // 执行之后的操作..

});

export default [
  { path: '/welcome', icon: 'smile', component: './Welcome', name: '欢迎页' },
  {
    path: '/admin',
    icon: 'crown',
    name: '管理页',
    access: 'canAdmin',
    routes: [
      { path: '/admin', redirect: '/admin/user' },
      { icon: 'table', path: '/admin/user', component: './Admin/User', name: '用户管理' },
    ],
  },
   ...
];

export default function access(initialState: { currentUser?: API.LoginUserVO } | undefined) {
  const { currentUser } = initialState ?? {};
  return {
    canUser: currentUser, // routes.ts路由中要是配置了canUser，那么就执行这个逻辑
    canAdmin: currentUser && currentUser.userRole === 'admin',
  };
}

const handleSubmit = async (values: API.UserLoginRequest) => {
    try {
      // 登录
      const res = await userLoginUsingPost({
        ...values,
      });

      // 保存已登录用户信息
      setInitialState({
        ...initialState,
        currentUser: res.data,
      });
      const urlParams = new URL(window.location.href).searchParams;
      history.push(urlParams.get('redirect') || '/');
      return;
    } catch (error: any) {

    }
  };

flushSync(() => {
  setInitialState((s) => ({ ...s, currentUser: undefined }));
});
loginOut();