Ant Design Pro Vue实现动态路由和菜单的前后端分离框架

首先可以从官网查看路由实现逻辑以及路由框架,我们要做的就是根据ant design的前端接口,给对应接口返回需要的数据即可。

1. 在src/main.js下, 第14行开始注释掉mock

// mock
// WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
// import './mock'

2. 在src/utils/request.js下

import axios from 'axios'
import store from '@/store'
// import storage from 'store'
import notification from 'ant-design-vue/es/notification'
import { VueAxios } from './axios'
import { ACCESS_TOKEN } from '@/store/mutation-types'

// 创建 axios 实例
const request = axios.create({
  // API 请求的默认前缀
  // baseURL: process.env.VUE_APP_API_BASE_URL, 
  // 根据后端的url
  baseURL: 'http://localhost:9001',
  timeout: 6000 // 请求超时时间
})

// 异常拦截处理器
const errorHandler = (error) => {
  if (error.response) {
    const data = error.response.data
    // 从 localstorage 获取 token
    // const token = storage.get(ACCESS_TOKEN)
    const token = true
    if (error.response.status === 403) {
      notification.error({
        message: 'Forbidden',
        description: data.message
      })
    }
    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
      notification.error({
        // message: 'Unauthorized',
        // description: 'Authorization verification failed'
      })
      if (token) {
        store.dispatch('Logout').then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
      }
    }
  }
  return Promise.reject(error)
}

// request interceptor
request.interceptors.request.use(config => {
  // const token = storage.get(ACCESS_TOKEN)
  const token = true
  // 如果 token 存在
  // 让每个请求携带自定义 token 请根据实际情况自行修改
  if (token) {
    config.headers[ACCESS_TOKEN] = token
  }
  return config
}, errorHandler)

// response interceptor
request.interceptors.response.use((response) => {
  return response.data
}, errorHandler)

const installer = {
  vm: {},
  install (Vue) {
    Vue.use(VueAxios, request)
  }
}

export default request

export {
  installer as VueAxios,
  request as axios
}

3. 修改store/modules/user.js 修改第37行action下第39行Login

    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          // const result = response.result
          const result = response.data
          console.log('this is result', result)
          storage.set(ACCESS_TOKEN, result.token, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
          commit('SET_TOKEN', result.token)
          resolve()
        }).catch(error => {
          console.log('this is err', error)
          reject(error)
        })
      })
    },

修改第53行GetInfo

// 获取用户信息
    GetInfo ({ commit }) {
      return new Promise((resolve, reject) => {
        // 请求后端获取用户信息 /api/user/info
        getInfo().then(response => {
          // const { result } = response
          const result = response.data
          console.log(result)
          // console.log(response.data)
          // console.log(response)
          if (result.role && result.role.permissions.length > 0) {
            const role = { ...result.role }
            role.permissions = result.role.permissions.map(permission => {
              const per = {
                ...permission,
                actionList: (permission.actionEntitySet || {}).map(item => item.action)
               }
              return per
            })
            role.permissionList = role.permissions.map(permission => { return permission.permissionId })
            // 覆盖响应体的 role, 供下游使用
            result.role = role

            commit('SET_ROLES', role)
            commit('SET_INFO', result)
            commit('SET_NAME', { name: result.name, welcome: welcome() })
            commit('SET_AVATAR', result.avatar)
            // 下游
            resolve(result)
          } else {
            reject(new Error('getInfo: roles must be a non-null array !'))
          }
        }).catch(error => {
          reject(error)
        })
      })
    },

4. 登录部分和后端的交互api在src/api/login.js中, 如果需要修改可以在此处修改

5. 在后端为前端写api

整个后端权限管理部分api都是从官网的图片 (该图片为部分, 具体请参见文章开头的图片或者官网) 而来, 可以说从上向下返回了图片中的权限也就完成了前后端打通

这些类具体的信息在src/mock/services/user.js中, 下面以java+Springboot为例, 实现其后端api (仅实现其模板中的用户, 其他具体不同用户不同权限暂未实现)

想要实现这样的效果, 就需要对这些类进行嵌套, 这里有多少层就需要多少类, 每个类中的信息都是

api/user/

在Controller中后端的总端口是

user/info

@GetMapping("/info")
    public ApiDataResponse<LoginBack> testloging() {
        System.out.println("it is called");
        LoginBack userInfo = new LoginBack();
        userInfo.setId("4291d7da9005377ec9aec4a71ea837f");
        userInfo.setName("天野远子");
        userInfo.setUsername("admin");
        userInfo.setPassword("");
        userInfo.setAvatar("/avatar2.jpg");
        userInfo.setStatus(1);
        userInfo.setTelephone("");
        userInfo.setLastLoginIp("27.154.74.117");
        userInfo.setLastLoginTime(1534837621348L);
        userInfo.setCreatorId("admin");
        userInfo.setCreateTime(1497160610259L);
        userInfo.setMerchantCode("TLif2btpzg079h15bk");
        userInfo.setDeleted(0);
        userInfo.setRoleId("admin");

        LoginRoleInfo loginRoleInfo = new LoginRoleInfo();

        loginRoleInfo.setId("admin");
        loginRoleInfo.setName("管理员");
        loginRoleInfo.setDescribe("123");
        loginRoleInfo.setCreatorId("system");
        loginRoleInfo.setCreateTime(1497160610259L);
        loginRoleInfo.setDeleted(0);

        LoginPermissions loginPermissions = new LoginPermissions();

        loginPermissions.setRoleId("admin");
        loginPermissions.setPermissionId("dashboard");
        loginPermissions.setPermissionName("ybp");

//        Set<LoginActionEntity> loginActionEntities = new HashSet<>();

        LoginActionEntity temp =  new LoginActionEntity();
        LoginActionEntity temp2 =  new LoginActionEntity();
        LoginActionEntity temp3 =  new LoginActionEntity();

        temp.setAction("add");
        temp.setDescribe("新增");
        temp.setDefaultCheck(false);

        loginPermissions.addLoginActionEntities(temp);

        temp2.setAction("query");
        temp2.setDescribe("查询");
        temp2.setDefaultCheck(false);

        loginPermissions.addLoginActionEntities(temp2);

        temp3.setAction("get");
        temp3.setDescribe("详情");
        temp3.setDefaultCheck(false);

        loginPermissions.addLoginActionEntities(temp3);

        loginPermissions.setActionList(null);
        loginPermissions.setDataAccess(null);
        
        loginRoleInfo.addLoginPermissions(loginPermissions);

        userInfo.setRole(loginRoleInfo);

        System.out.println(userInfo);
        return ApiDataResponse.success(userInfo);

    }

user/nav

@GetMapping("/nav")
    public ApiDataResponse<Set<LoginNav>> getNav(){
        System.out.println("nav is called");
        Set<LoginNav> loginNavs = new HashSet<>();

        LoginNavMeta dashboardMeta = new LoginNavMeta();
        dashboardMeta.setTitle("menu.dashboard");
        dashboardMeta.setIcon("dashboard");
        dashboardMeta.setShow(true);

        LoginNavMeta workplaceMeta = new LoginNavMeta();
        workplaceMeta.setTitle("menu.dashboard.monitor");
        workplaceMeta.setShow(true);

// 创建 LoginNav 对象并添加到列表中
        LoginNav dashboard = new LoginNav();
        dashboard.setName("dashboard");
        dashboard.setParentId(0);
        dashboard.setId(1);
        dashboard.setMeta(dashboardMeta);
        dashboard.setComponent("RouteView");
        dashboard.setRedirect("/dashboard/workplace");
        loginNavs.add(dashboard);

        LoginNav workplace = new LoginNav();
        workplace.setName("workplace");
        workplace.setParentId(1);
        workplace.setId(7);
        workplace.setMeta(workplaceMeta);
        workplace.setComponent("Workplace");
        loginNavs.add(workplace);


        //2
        LoginNavMeta monitorMeta = new LoginNavMeta();
        monitorMeta.setTitle("menu.dashboard.workplace");
        monitorMeta.setShow(true);
        monitorMeta.setTarget("_blank"); // 设置新字段

        LoginNav monitor = new LoginNav();
        monitor.setName("monitor");
        monitor.setParentId(1);
        monitor.setId(3);
        monitor.setMeta(monitorMeta);
        monitor.setPath("https://www.baidu.com/"); // 设置新字段
        loginNavs.add(monitor);

        LoginNavMeta analysisMeta = new LoginNavMeta();
        analysisMeta.setTitle("menu.dashboard.analysis");
        analysisMeta.setShow(true);

        LoginNav analysis = new LoginNav();
        analysis.setName("Analysis");
        analysis.setParentId(1);
        analysis.setId(2);
        analysis.setMeta(analysisMeta);
        analysis.setComponent("Analysis");
        analysis.setPath("/dashboard/analysis");
        loginNavs.add(analysis);

        //form
        LoginNavMeta formMeta = new LoginNavMeta();
        formMeta.setIcon("form");
        formMeta.setTitle("menu.form");

        LoginNav form = new LoginNav();
        form.setName("form");
        form.setParentId(0);
        form.setId(10);
        form.setMeta(formMeta);
        form.setRedirect("/form/base-form");
        form.setComponent("RouteView");
        loginNavs.add(form);

        LoginNavMeta basicFormMeta = new LoginNavMeta();
        basicFormMeta.setTitle("menu.form.basic-form");

        LoginNav basicForm = new LoginNav();
        basicForm.setName("basic-form");
        basicForm.setParentId(10);
        basicForm.setId(6);
        basicForm.setMeta(basicFormMeta);
        basicForm.setComponent("BasicForm");
        loginNavs.add(basicForm);

        LoginNavMeta stepFormMeta = new LoginNavMeta();
        stepFormMeta.setTitle("menu.form.step-form");

        LoginNav stepForm = new LoginNav();
        stepForm.setName("step-form");
        stepForm.setParentId(10);
        stepForm.setId(5);
        stepForm.setMeta(stepFormMeta);
        stepForm.setComponent("StepForm");
        loginNavs.add(stepForm);

        LoginNavMeta advancedFormMeta = new LoginNavMeta();
        advancedFormMeta.setTitle("menu.form.advanced-form");

        LoginNav advancedForm = new LoginNav();
        advancedForm.setName("advanced-form");
        advancedForm.setParentId(10);
        advancedForm.setId(4);
        advancedForm.setMeta(advancedFormMeta);
        advancedForm.setComponent("AdvanceForm");
        loginNavs.add(advancedForm);

        //list
        LoginNavMeta listMeta = new LoginNavMeta();
        listMeta.setIcon("table");
        listMeta.setTitle("menu.list");
        listMeta.setShow(true);

        LoginNav list = new LoginNav();
        list.setName("list");
        list.setParentId(0);
        list.setId(10010);
        list.setMeta(listMeta);
        list.setRedirect("/list/table-list");
        list.setComponent("RouteView");
        loginNavs.add(list);

        LoginNavMeta tableListMeta = new LoginNavMeta();
        tableListMeta.setTitle("menu.list.table-list");
        tableListMeta.setShow(true);

        LoginNav tableList = new LoginNav();
        tableList.setName("table-list");
        tableList.setParentId(10010);
        tableList.setId(10011);
        tableList.setPath("/list/table-list/:pageNo([1-9]\\d*)?");
        tableList.setMeta(tableListMeta);
        tableList.setComponent("TableList");
        loginNavs.add(tableList);

        LoginNavMeta basicListMeta = new LoginNavMeta();
        basicListMeta.setTitle("menu.list.basic-list");
        basicListMeta.setShow(true);

        LoginNav basicList = new LoginNav();
        basicList.setName("basic-list");
        basicList.setParentId(10010);
        basicList.setId(10012);
        basicList.setMeta(basicListMeta);
        basicList.setComponent("StandardList");
        loginNavs.add(basicList);

// 创建 Card List 页面
        LoginNavMeta cardListMeta = new LoginNavMeta();
        cardListMeta.setTitle("menu.list.card-list");
        cardListMeta.setShow(true);

        LoginNav cardList = new LoginNav();
        cardList.setName("card");
        cardList.setParentId(10010);
        cardList.setId(10013);
        cardList.setMeta(cardListMeta);
        cardList.setComponent("CardList");
        loginNavs.add(cardList);

// 创建 Search Layout 页面
        LoginNavMeta searchLayoutMeta = new LoginNavMeta();
        searchLayoutMeta.setTitle("menu.list.search-list");
        searchLayoutMeta.setShow(true);
//        searchLayoutMeta.setRedirect("/list/search/article");

        LoginNav searchLayout = new LoginNav();
        searchLayout.setName("search");
        searchLayout.setParentId(10010);
        searchLayout.setId(10014);
        searchLayout.setMeta(searchLayoutMeta);
        searchLayout.setRedirect("/list/search/article");
        searchLayout.setComponent("SearchLayout");
        loginNavs.add(searchLayout);

// 创建 Search Articles 页面
        LoginNavMeta searchArticlesMeta = new LoginNavMeta();
        searchArticlesMeta.setTitle("menu.list.search-list.articles");
        searchArticlesMeta.setShow(true);

        LoginNav searchArticles = new LoginNav();
        searchArticles.setName("article");
        searchArticles.setParentId(10014);
        searchArticles.setId(10015);
        searchArticles.setMeta(searchArticlesMeta);
        searchArticles.setComponent("SearchArticles");
        loginNavs.add(searchArticles);

        // 创建 Search Projects 页面
        LoginNavMeta searchProjectsMeta = new LoginNavMeta();
        searchProjectsMeta.setTitle("menu.list.search-list.projects");
        searchProjectsMeta.setShow(true);

        LoginNav searchProjects = new LoginNav();
        searchProjects.setName("project");
        searchProjects.setParentId(10014);
        searchProjects.setId(10016);
        searchProjects.setMeta(searchProjectsMeta);
        searchProjects.setComponent("SearchProjects");
        loginNavs.add(searchProjects);

// 创建 Search Applications 页面
        LoginNavMeta searchApplicationsMeta = new LoginNavMeta();
        searchApplicationsMeta.setTitle("menu.list.search-list.applications");
        searchApplicationsMeta.setShow(true);

        LoginNav searchApplications = new LoginNav();
        searchApplications.setName("application");
        searchApplications.setParentId(10014);
        searchApplications.setId(10017);
        searchApplications.setMeta(searchApplicationsMeta);
        searchApplications.setComponent("SearchApplications");
        loginNavs.add(searchApplications);

        //profile
        // 创建 Profile 页面
        LoginNavMeta profileMeta = new LoginNavMeta();
        profileMeta.setTitle("menu.profile");
        profileMeta.setIcon("profile");
        profileMeta.setShow(true);

        LoginNav profile = new LoginNav();
        profile.setName("profile");
        profile.setParentId(0);
        profile.setId(10018);
        profile.setMeta(profileMeta);
        profile.setRedirect("/profile/basic");
        profile.setComponent("RouteView");
        loginNavs.add(profile);

// 创建 Profile Basic 页面
        LoginNavMeta profileBasicMeta = new LoginNavMeta();
        profileBasicMeta.setTitle("menu.profile.basic");
        profileBasicMeta.setShow(true);

        LoginNav profileBasic = new LoginNav();
        profileBasic.setName("basic");
        profileBasic.setParentId(10018);
        profileBasic.setId(10019);
        profileBasic.setMeta(profileBasicMeta);
        profileBasic.setComponent("ProfileBasic");
        loginNavs.add(profileBasic);

// 创建 Profile Advanced 页面
        LoginNavMeta profileAdvancedMeta = new LoginNavMeta();
        profileAdvancedMeta.setTitle("menu.profile.advanced");
        profileAdvancedMeta.setShow(true);

        LoginNav profileAdvanced = new LoginNav();
        profileAdvanced.setName("advanced");
        profileAdvanced.setParentId(10018);
        profileAdvanced.setId(10020);
        profileAdvanced.setMeta(profileAdvancedMeta);
        profileAdvanced.setComponent("ProfileAdvanced");
        loginNavs.add(profileAdvanced);

        //result
        // 创建 Result 页面
        LoginNavMeta resultMeta = new LoginNavMeta();
        resultMeta.setTitle("menu.result");
        resultMeta.setIcon("check-circle-o");
        resultMeta.setShow(true);

        LoginNav result = new LoginNav();
        result.setName("result");
        result.setParentId(0);
        result.setId(10021);
        result.setMeta(resultMeta);
        result.setRedirect("/result/success");
        result.setComponent("PageView");
        loginNavs.add(result);

// 创建 Result Success 页面
        LoginNavMeta resultSuccessMeta = new LoginNavMeta();
        resultSuccessMeta.setTitle("menu.result.success");
        resultSuccessMeta.setHiddenHeaderContent(true);
        resultSuccessMeta.setShow(true);

        LoginNav resultSuccess = new LoginNav();
        resultSuccess.setName("success");
        resultSuccess.setParentId(10021);
        resultSuccess.setId(10022);
        resultSuccess.setMeta(resultSuccessMeta);
        resultSuccess.setComponent("ResultSuccess");
        loginNavs.add(resultSuccess);

// 创建 Result Fail 页面
        LoginNavMeta resultFailMeta = new LoginNavMeta();
        resultFailMeta.setTitle("menu.result.fail");
        resultFailMeta.setHiddenHeaderContent(true);
        resultFailMeta.setShow(true);

        LoginNav resultFail = new LoginNav();
        resultFail.setName("fail");
        resultFail.setParentId(10021);
        resultFail.setId(10023);
        resultFail.setMeta(resultFailMeta);
        resultFail.setComponent("ResultFail");
        loginNavs.add(resultFail);

        //exception
        // 创建 Exception 页面
        LoginNavMeta exceptionMeta = new LoginNavMeta();
        exceptionMeta.setTitle("menu.exception");
        exceptionMeta.setIcon("warning");
        exceptionMeta.setShow(true);

        LoginNav exception = new LoginNav();
        exception.setName("exception");
        exception.setParentId(0);
        exception.setId(10024);
        exception.setMeta(exceptionMeta);
        exception.setRedirect("/exception/403");
        exception.setComponent("RouteView");
        loginNavs.add(exception);

// 创建 403 页面
        LoginNavMeta exception403Meta = new LoginNavMeta();
        exception403Meta.setTitle("menu.exception.not-permission");
        exception403Meta.setShow(true);

        LoginNav exception403 = new LoginNav();
        exception403.setName("403");
        exception403.setParentId(10024);
        exception403.setId(10025);
        exception403.setMeta(exception403Meta);
        exception403.setComponent("Exception403");
        loginNavs.add(exception403);

// 创建 404 页面
        LoginNavMeta exception404Meta = new LoginNavMeta();
        exception404Meta.setTitle("menu.exception.not-find");
        exception404Meta.setShow(true);

        LoginNav exception404 = new LoginNav();
        exception404.setName("404");
        exception404.setParentId(10024);
        exception404.setId(10026);
        exception404.setMeta(exception404Meta);
        exception404.setComponent("Exception404");
        loginNavs.add(exception404);

// 创建 500 页面
        LoginNavMeta exception500Meta = new LoginNavMeta();
        exception500Meta.setTitle("menu.exception.server-error");
        exception500Meta.setShow(true);

        LoginNav exception500 = new LoginNav();
        exception500.setName("500");
        exception500.setParentId(10024);
        exception500.setId(10027);
        exception500.setMeta(exception500Meta);
        exception500.setComponent("Exception500");
        loginNavs.add(exception500);

        //account
        // 创建 Account 页面
        LoginNavMeta accountMeta = new LoginNavMeta();
        accountMeta.setTitle("menu.account");
        accountMeta.setIcon("user");
        accountMeta.setShow(true);

        LoginNav account = new LoginNav();
        account.setName("account");
        account.setParentId(0);
        account.setId(10028);
        account.setMeta(accountMeta);
        account.setRedirect("/account/center");
        account.setComponent("RouteView");
        loginNavs.add(account);

// 创建 Center 页面
        LoginNavMeta centerMeta = new LoginNavMeta();
        centerMeta.setTitle("menu.account.center");
        centerMeta.setShow(true);

        LoginNav center = new LoginNav();
        center.setName("center");
        center.setParentId(10028);
        center.setId(10029);
        center.setMeta(centerMeta);
        center.setComponent("AccountCenter");
        loginNavs.add(center);

// 创建 Settings 页面
        LoginNavMeta settingsMeta = new LoginNavMeta();
        settingsMeta.setTitle("menu.account.settings");
        settingsMeta.setHideHeader(true);
        settingsMeta.setHideChildren(true);
        settingsMeta.setShow(true);

        LoginNav settings = new LoginNav();
        settings.setName("settings");
        settings.setParentId(10028);
        settings.setId(10030);
        settings.setMeta(settingsMeta);
        settings.setRedirect("/account/settings/basic");
        settings.setComponent("AccountSettings");
        loginNavs.add(settings);

// 创建 BasicSettings 页面
        LoginNavMeta basicSettingsMeta = new LoginNavMeta();
        basicSettingsMeta.setTitle("account.settings.menuMap.basic");
        basicSettingsMeta.setShow(false);

        LoginNav basicSettings = new LoginNav();
        basicSettings.setName("BasicSettings");
        basicSettings.setPath("/account/settings/basic");
        basicSettings.setParentId(10030);
        basicSettings.setId(10031);
        basicSettings.setMeta(basicSettingsMeta);
        basicSettings.setComponent("BasicSetting");
        loginNavs.add(basicSettings);

// 创建 SecuritySettings 页面
        LoginNavMeta securitySettingsMeta = new LoginNavMeta();
        securitySettingsMeta.setTitle("account.settings.menuMap.security");
        securitySettingsMeta.setShow(false);

        LoginNav securitySettings = new LoginNav();
        securitySettings.setName("SecuritySettings");
        securitySettings.setPath("/account/settings/security");
        securitySettings.setParentId(10030);
        securitySettings.setId(10032);
        securitySettings.setMeta(securitySettingsMeta);
        securitySettings.setComponent("SecuritySettings");
        loginNavs.add(securitySettings);

// 创建 CustomSettings 页面
        LoginNavMeta customSettingsMeta = new LoginNavMeta();
        customSettingsMeta.setTitle("account.settings.menuMap.custom");
        customSettingsMeta.setShow(false);

        LoginNav customSettings = new LoginNav();
        customSettings.setName("CustomSettings");
        customSettings.setPath("/account/settings/custom");
        customSettings.setParentId(10030);
        customSettings.setId(10033);
        customSettings.setMeta(customSettingsMeta);
        customSettings.setComponent("CustomSettings");
        loginNavs.add(customSettings);

// 创建 BindingSettings 页面
        LoginNavMeta bindingSettingsMeta = new LoginNavMeta();
        bindingSettingsMeta.setTitle("account.settings.menuMap.binding");
        bindingSettingsMeta.setShow(false);

        LoginNav bindingSettings = new LoginNav();
        bindingSettings.setName("BindingSettings");
        bindingSettings.setPath("/account/settings/binding");
        bindingSettings.setParentId(10030);
        bindingSettings.setId(10034);
        bindingSettings.setMeta(bindingSettingsMeta);
        bindingSettings.setComponent("BindingSettings");
        loginNavs.add(bindingSettings);

// 创建 NotificationSettings 页面
        LoginNavMeta notificationSettingsMeta = new LoginNavMeta();
        notificationSettingsMeta.setTitle("account.settings.menuMap.notification");
        notificationSettingsMeta.setShow(false);

        LoginNav notificationSettings = new LoginNav();
        notificationSettings.setName("NotificationSettings");
        notificationSettings.setPath("/account/settings/notification");
        notificationSettings.setParentId(10030);
        notificationSettings.setId(10035);
        notificationSettings.setMeta(notificationSettingsMeta);
        notificationSettings.setComponent("NotificationSettings");
        loginNavs.add(notificationSettings);
        
        return ApiDataResponse.success(loginNavs);
    }

 api/auth/

@PostMapping("/login")
    public ApiDataResponse<Login> loging(@RequestBody ReceiveLogin receiveLogin) {

        System.out.println("login is called" + receiveLogin);
        List<Login> testList = this.loginService.selectUser(receiveLogin.getUsername());

        if(!testList.isEmpty() && testList.get(0).getPassword().equals(receiveLogin.getPassword())) {

            testList.get(0).setPassword("");


            String token;
            Date expirationTime = new Date(System.currentTimeMillis() + 2 * 60 * 60 * 1000);
            token = JWT.create().withAudience(receiveLogin.getUsername())// 将 user id 保存到 token 里面,作为载荷
            .withExpiresAt(expirationTime)// 2小时后token过期
            .sign(Algorithm.HMAC256(receiveLogin.getPassword()));// 以 password 作为 token 的密钥


            testList.get(0).setToken(token);

            System.out.println(testList.get(0));

            return ApiDataResponse.success(testList.get(0));
        }
        else
            return ApiDataResponse.fail(5000, "账号密码错误");
    }

    @PostMapping("/logout")
    public ApiDataResponse<Boolean> loging(String token) {
        return ApiDataResponse.success(true);
    }

}

参考文章

SpringBoot + Ant Design Pro Vue实现动态路由和菜单的前后端分离框架_react antd vue pro 动态路由-CSDN博客

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Ant Design Pro Vue 动态路由是指在运行时根据用户权限或其他条件动态生成路由。这种方式可以使应用程序更加灵活和可扩展,可以根据不同的用户角色或权限来展示不同的页面或菜单。在 Ant Design Pro Vue 中,可以通过配置路由表和权限控制来实现动态路由。具体实现方式可以参考官方文档或相关教程。 ### 回答2: Ant Design Pro Vue 是一个基于 Vue.js 的企业级中后台前端开发框架,它能够极大地提高开发效率和页面美观度。动态路由是其一个非常重要的功能,可以让前端路由的配置在后台管理系统中进行动态修改和生成,减少了前后端的耦合性。下面将对动态路由的使用进行详细介绍。 动态路由的概念: 动态路由是指根据后台返回的数据动态生成前端路由配置,前端可以通过该配置进行页面的访问。具体来说,当用户在前端操作时,前端会发起请求到后台,后台返回一个包含路由信息的 JSON 数据,前端负责解析该数据并进行路由配置。 实现步骤: 1.首先在路由配置文件中定义一个动态路由所在的组件。 2.在页面初始加载时,通过 Ajax 请求后台路由信息。 3.将后台返回的路由信息动态生成配置,并添加到路由表中。 4.当用户访问页面时,根据请求的路径进行路由匹配,并将匹配到的组件渲染到页面中。 优点: 1.动态路由配置可以让前端和后端的路由分离,减少了前后端的耦合性。 2.简化了前端路由的管理,后台管理员可以通过后台管理系统进行路由配置,而不需要修改前端代码。 3.动态路由可以提高前端的开发效率,让前端开发人员更加专注于界面和交互的开发。 总之,Ant Design Pro Vue 动态路由是一个非常重要的功能,它大大提高了前端开发的效率和可维护性,也方便了后台管理员进行路由配置。因此,大家在使用 Ant Design Pro Vue 开发企业级中后台系统时,一定要熟练掌握其动态路由的使用方法。 ### 回答3: Ant Design Pro Vue 是一个基于 Vue.js 技术栈的企业级中后台前端解决方案。它使用 Ant Design UI 组件库,并提供了一系列的经过优化的业务逻辑组件和样式,可以帮助开发人员更快速地完成中后台项目的开发。 动态路由Ant Design Pro Vue 的一个重要特性之一,它可以让开发人员根据业务需求动态地生成路由。这个特性的优点在于它可以大大减少开发人员的工作量,提高开发效率。具体来说,动态路由可以帮助开发人员实现以下几方面的需求: 1. 针对不同的角色或权限级别,动态生成不同的路由配置。这样,可以保证不同用户只能访问其具备权限的资源。 2. 根据业务需求动态生成菜单配置。这样,可以方便地根据业务需求灵活地修改菜单展示。 3. 当前路由路径不存在时,可以根据业务需求自动跳转到指定的路由。这样,可以避免用户访问不存在的路由时出现问题。 除了以上几点之外,动态路由还具有以下几个优点: 1. 可以更加灵活地处理路由跳转逻辑,使得开发人员可以更方便地处理复杂的业务逻辑。 2. 可以更好地适应企业级前端项目开发的需求,使得项目可以更容易地扩展和维护。 总之,Ant Design Pro Vue动态路由特性可以帮助开发人员快速构建出高质量的企业级中后台前端项目。它的灵活性和可扩展性可以满足各种不同项目的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值