vue axios 乙個專案學會前端實現登入攔截

2021-08-18 02:48:43 字數 1638 閱讀 7229

你需要先生成自己的 github personal token(生成token)。 

token 生成後 訪問 demo,即可檢視你的repository list。

.

├── readme.md

├── dist // 打包構建後的資料夾

│ ├── build.js

│ └── build.js

.map

├── index.html

├── package.json

├── src

│ ├── assets

│ │ ├── css.css

│ │ ├── icon.css

│ │ └── logo.png

│ ├── constant

│ │ └── api.js // 配置api介面檔案

│ ├── http.js // 封裝fetch、post請求及http ***配置檔案

│ ├── index.vue

│ ├── login.vue

│ ├── main.js

│ ├── repository.vue

│ ├── router.js // 路由配置檔案

│ └── store

│ ├── store.js

│ └── types.js // vuex types

└── webpack.config

.js

vue-router

vuex

axios

vue-material

第一步:路由攔截

const routes = [,,

component: repository

},];

router.beforeeach((to, from, next) => 

else // 將跳轉的路由path作為引數,登入成功後跳轉到該路由})}

}else

})

第二步:***

// http request ***

}return promise.reject(error.response.data) // 返回介面返回的錯誤資訊

});

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

vue axios 乙個專案學會前端實現登入攔截

乙個專案學會vue全家桶 axios實現登入 攔截 登出功能,以及利用axios的http 攔截請求和響應。該專案是利用了github 提供的personal token作為登入token,通過token訪問你的repository list。通過這個專案學習如何實現乙個前端專案中所需要的 登入及攔...

vue axios 乙個專案學會前端實現登入攔截

乙個專案學會vue全家桶 axios實現登入 攔截 登出功能,以及利用axios的http 攔截請求和響應。該專案是利用了github 提供的personal token作為登入token,通過token訪問你的repository list。通過這個專案學習如何實現乙個前端專案中所需要的 登入及攔...

vue axios 乙個專案學會前端實現登入攔截

第一步 路由攔截const routes component repository router.beforeeach to,from,next else 將跳轉的路由path作為引數,登入成功後跳轉到該路由 else 這時候就需要結合 http 後端介面返回的http 狀態碼來判斷。第二步 htt...