該項目是利用了Github 提供的personal token作為登錄token，通過token訪問你的Repository List。通過這個項目學習如何實現一個前端項目中所需要的 登錄及攔截、登出、token失效的攔截及對應 axios 攔截器的使用。

準備

你需要先生成自己的 Github Personal Token（ 生成Token ）。 Token 生成后 訪問 Demo，即可查看你的Repository List。

項目結構

├── README.md├── dist // 打包構建后的文件夾│ ├── build.js│ └── build.js.map├── index.html├── package.json├── src│ ├── App.vue│ ├── 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

技術棧

登錄攔截邏輯

第一步：路由攔截

首先在定義路由的時候就需要多添加一個自定義字段 requireAuth ，用于判斷該路由的訪問是否需要登錄。如果用戶已經登錄，則順利進入路由， 否則就進入登錄頁面。

const routes = [ {  path: '/',  name: '/',  component: Index }, {  path: '/repository',  name: 'repository',  meta: {   requireAuth: true, // 添加該字段，表示進入這個路由是需要登錄的  },  component: Repository }, {  path: '/login',  name: 'login',  component: Login }];

定義完路由后，我們主要是利用 vue-router 提供的鉤子函數 beforeEach() 對路由進行判斷。

router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權限  if (store.state.token) { // 通過vuex state獲取當前的token是否存在   next();  }  else {   next({    path: '/login',    query: {redirect: to.fullPath} // 將跳轉的路由path作為參數，登錄成功后跳轉到該路由   })  } } else {  next(); }})

每個鉤子方法接收三個參數：