书接上回，本文主要分享 企业内部系统集成钉钉官方OA审批流程的步骤 的第二部分。
前端代码集成钉钉免登JSAPI:
前端通过corpid 获得钉钉临时访问码code，再通过临时访问码code调用此接口返回当前用户的姓名、userid、 钉钉用户id、 系统工号、 钉钉部门id列表、 业务系统访问token 等信息，然后将 token 存储到 localStorage。
前端框架使用 react
操作 localStorage 的基础代码
export function getToken(){return localStorage.getItem("token") as string
}export function setToken(token:string){localStorage.setItem("token",token)
}export function removeToken(){localStorage.removeItem("token")
}判断字段是否包含指定的字符串
export function containsStr(str:string, target:string): boolean{str = str === null ? 'str' : str;target = target === null ? 'target' : target;if(str.indexOf(target) !== -1){// 字段str包含指定的字符串return true;} else {// 字段str不包含指定的字符串return false;}
}钉钉免登录插件
export class checkLoginPlugin extends Middleware {async handler(ctx: MiddlewareContext<{}>, next: () => Promise<any>): Promise<void> {// 判断是否获取到了tokenvar token = getToken()const base_url = import.meta.env.BASE_URL;localStorage.setItem("base_url", base_url);if (token) {// token有值axios({method: 'get',baseURL: '/sale',url: '/api/checkToken?token=' + token,headers: {'Content-Type': 'application/json',},}).then((res: AxiosResponse) => {if (res.data.code == 200) {// token有效，打开应用localStorage.setItem("dingUserId", res.data.dingUserId);localStorage.setItem("dingDeptIds", res.data.dingDeptId);// 检查当前登录人的角色中是否包含 MANAGER 可以辅助实现数据权限校验var role_no = localStorage.getItem("role_no") as string;if (containsStr(role_no, "MANAGER")) {localStorage.setItem("manager", "true");} else {localStorage.setItem("manager", "false");}next()} else { // token无效，钉钉重新获取token，不是钉钉，直接提示未登录if (dd.env.platform !== "notInDingTalk") {// 钉钉打开应用，重新获取code及tokenconst corpid = import.meta.env.CORPIDdd.ready(() => {dd.runtime.permission.requestAuthCode({corpId: corpid,}).then((result) => {const { code } = result;axios({method: 'get',baseURL: '/sale',url: '/dd/login?code=' + code,headers: {'Content-Type': 'application/json'},}).then((res: AxiosResponse) => {localStorage.setItem("token", res.data.data.token);localStorage.setItem("dingUserId", res.data.data.dingUserId);localStorage.setItem("dingDeptIds", res.data.data.dingDeptIds);localStorage.setItem("user_info", res.data.data.user_info);localStorage.setItem("userno", res.data.data.user_no);localStorage.setItem("user_id", res.data.data.user_id);// 检查当前登录人的角列表是否包含 MANAGER 可以辅助实现数据权限校验var role_no = localStorage.getItem("role_no") as string;if (containsStr(role_no, "MANAGER")) {localStorage.setItem("manager", "true");} else {localStorage.setItem("manager", "false");}token = res.data.data.token;// 可以继续访问应用资源next()return res.data.data}).catch(err => {router.navigate("/check") //登录页return Promise.reject(err)})},).catch(err => {// 出现异常，跳转到登录页router.navigate("/checkLogin")});});} else {// 从钉钉外打开应用，跳转到登录页router.navigate("/checkLogin")}}}).catch(err => {// 出现异常，跳转到登录页router.navigate("/checkLogin")return Promise.reject(err)})} else {// token没有值if (dd.env.platform !== "notInDingTalk") {// 钉钉打开应用，重新获取钉钉临时code及tokenconst corpid = import.meta.env.CORPIDdd.ready(() => {dd.runtime.permission.requestAuthCode({corpId: corpid,}).then((result) => {const { code } = result;axios({method: 'get',baseURL: '/sale',url: '/dd/login?code=' + code,headers: {'Content-Type': 'application/json'},}).then((res: AxiosResponse) => {localStorage.setItem("usertoken", res.data.data.token);localStorage.setItem("dingtalkUserId", res.data.data.dingtalkUserId);localStorage.setItem("dingtalkDeptIds", res.data.data.dingtalkDeptIds);localStorage.setItem("user_info", res.data.data.user_info);localStorage.setItem("userno", res.data.data.user_no);localStorage.setItem("user_id", res.data.data.user_id);// 检查当前登录人的角色中是否包含 MANAGER 可以辅助实现数据权限校验var role_no = localStorage.getItem("role_no") as string;if (containsStr(role_no, "MANAGER")) {localStorage.setItem("manager", "true");} else {localStorage.setItem("manager", "false");}token = res.data.data.token;next()return res.data.data}).catch(err => {// 出现异常，跳转到登录页router.navigate("/checkLogin")return Promise.reject(err)})},).catch(err => {// 出现异常，跳转到登录页router.navigate("/checkLogin")});});} else { // 从钉钉外打开应用，跳转到登录页router.navigate("/checkLogin")}}}}
