工作原理
前端頁面進行登錄操作, 將用戶名與密碼發給服務器; 服務器進行效驗, 通過后生成token, 包含信息有密鑰, uid, 過期時間, 一些隨機算法等 ,然后返回給前端 前端將token保存在本地中, 建議使用localstorage進行保存. 下次對服務器發送請求時, 帶上本地存儲的token 服務器端,進行對token的驗證, 通過的話, 進行相應的增刪改查操作, 并將數據返回給前端 為通過則返回錯誤碼, 提示保錯信息, 然后跳轉到登錄頁.具體步驟
所用技術: vuex + axios + localStorage + vue-router
1、在登錄路由添加自定義mate字段, 來記錄該頁面是否需要身份驗證
//router.js{ path: "/index", name: "index", component: resolve => require(['./index.vue'], resolve), meta: { requiresAuth: true }} 2、設置路由攔截
router.beforeEach((to, from, next) => { //matched的數組中包含$route對象的檢查元字段 //arr.some() 表示判斷該數組是否有元素符合相應的條件, 返回布爾值 if (to.matched.some(record => record.meta.requiresAuth)) { //判斷當前是否有登錄的權限 if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // 確保一定要調用 next() }})3、設置攔截器
這里使用axios的攔截器，對所有請求進行攔截判斷。
在后面的所有請求中都將攜帶token進行. 我們利用axios中的攔截器, 通過配置http response inteceptor, 當后端接口返回401 (未授權), 讓用戶重新執行登錄操作。
// http request 攔截器axios.interceptors.request.use( config => { if (store.state.token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token config.headers.Authorization = `token ${store.state.token}`; } return config; }, err => { return Promise.reject(err); });// http response 攔截器axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 返回 401 清除token信息并跳轉到登錄頁面 store.commit(types.LOGOUT); router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) } } return Promise.reject(error.response.data) // 返回接口返回的錯誤信息});4、將token存儲在本地中
可以使用cookies/local/sessionStograge
三者的區別:
sessionStorage 不能跨頁面共享的，關閉窗口即被清除， localStorage 可以同域共享，并且是持久化存儲的 在 local / session storage 的 tokens，就不能從不同的域名中讀取,甚至是子域名也不行. 解決辦法使用Cookie.demo: 假設當用戶通過 app.yourdomain.com 上面的驗證時你生成一個 token 并且作為一個 cookie 保存到 .yourdomain.com,然后，在 youromdain.com 中你可以檢查這個 cookie 是不是已經存在了，并且如果存在的話就轉到 app.youromdain.com去。這個 token 將會對程序的子域名以及之后通常的流程都有效（直到這個 token 超過有效期）只是利用cookie的特性進行存儲而非驗證.新聞熱點
疑難解答
圖片精選
