從零開始，手打一個權限管理系統（第六章 前端代碼的接入）

前言

前端架構我們采用位元組的Arco Design Pro，技術棧為 vue + ES2015 + TypeScript + Arco Design 和 echarts等，開發工具的用的是VisualStudioCode，提前學習和了解這些知識将幫助你更好地上手項目。

一、項目初始化

根據官方文檔的步驟，初始一個簡單版的就可以了，報錯的話可以忽略！

安裝依賴，在前端項目檔案夾下執行命yarn install，出現如下錯誤隻需要修改package.json， 将 "prepare": "husky install"這行删掉即可。

重新執行yarn install，然後執行yarn dev，項目就可以正常運作起來。

二、目錄結構

先熟悉下目錄結構，搞清楚各個子產品是幹嘛的！！！

├── package.json
├── index.html
├── src
│   ├── api  # 請求接口
│   ├── assets  # 靜态資源
│          └── style 全局樣式
│   ├── components  # 通用業務元件
│   ├── config  # 全局配置(包含echarts主題)
│          └── settings.json  # 配置檔案
│   ├── directives # 指令集（如需，可自行補充）
│   ├── filters # 過濾器（如需，可自行補充）
│   ├── hooks # 全局hooks
│   ├── layout  # 布局
│   ├── locale  # 國際化語言包
│   ├── mock  # 模拟資料
│   ├── views  # 頁面模闆
│   ├── router # 路由配置
│   ├── store  # 狀态管理中心
│   ├── types  # Typescript 類型
│   └── utils  # 工具庫
│   └── App.vue  # 視圖入口
│   └── main.ts  # 入口檔案
└── tsconfig.json           

修改配置檔案，添加前端代理，關聯後端系統

在vite.config.dev.ts的server節點下添加代理配置

proxy: {
  '/upms': {
    target: loadEnv('development', '.').VITE_PROXY,
    rewrite: (path) => path.replace(/^\/upms/, '/upms'),
    configure: (server) =>
      // 攔截請求 列印位址。友善辨認重定向後的位址是否正确 沒有端口資訊
      server.on('proxyReq', (req) =>
        console.log(`${req.host}${req.path}`)
      ),
  },
},           

在.env.development配置我們的後端位址：VITE_PROXY='http://127.0.0.1:8888' 去掉main.ts的mock配置

三、登入

後端的登入接口（/upms/login）我們已經測試過了，現在就将它和前端關聯起來。 熟悉了項目目錄結構的同學應該知道，後端接口的位址是放在api這個檔案夾下的，登入接口就在user.ts這個檔案裡面，将裡面url位址改成我們的即可。

export function login(data: LoginData) {
  return axios.post<LoginRes>('/upms/login', data);
}           

重新整理頁面，輸入使用者名密碼，點選登入

提示我們使用者不存在，可是這個使用者資料庫裡面是有的，那是怎麼肥事了？？？ 其實是因為我們傳參的問題，SpringSecurity接受使用者密碼是通過URL來的，是以我們必須也改成URL傳參

前端接口改成這樣就可以了

export function login(data: LoginData) {
  return axios.post<LoginRes>('/upms/login', {}, { params: data });
}           

重新重新整理頁面，點選登入，發現可以成功

問題又來了，登入成功為啥沒有跳轉了？？？ 這個問題留給大家思考一下，我們下一章來解答！！！

目前版本tag：1.0.5

代碼倉庫：https://gitee.com/ailot/study

四、 體驗位址（http://test.ailot.vip/）

最近手上事情有點多，更新慢了點！！！

背景資料庫隻給了部分權限，報錯屬于正常！ 想學的老鐵給點點關注吧！！！

我是阿咕噜，一個從網際網路慢慢上岸的程式員，如果喜歡我的文章，記得幫忙點個贊喲，謝謝！