？問題 ：如何添加token,解決鑒權問題
方案：通過登錄頁面，發送請求，獲取到token值，并把token值存盤（localStorage、sessionStorage、cookieStore），示例如下：
<template> <el-form label-> <el-form-item label="用戶名"> <el-input v-model="loginForm.username"></el-input> </el-form-item> <el-form-item label="密碼"> <el-input type='password' v-model="loginForm.password"></el-input> </el-form-item> //點擊事件，注意下面對應的方法 <el-button style="width: 100%;" type="primary" @click="submitLogin1" >登錄</el-button> </el-form> </template> <script> /*使用axios發送post請求 請求地址url: http://12xxxxx8:18899/login/ 請求引數： username:test password:test123456 */ // 使用前匯入所需的依賴插件 import { useWindowScroll } from '@vueuse/core' import axios from 'axios' import qs from 'qs' export default{ data(){ return{ loginForm:{ username:'', password:'' } } }, methods:{ async submitLogin(){ // 利用封裝的login方法，發送登錄請求（/api/index.js 檔案中） const response = await this.$api.login(this.loginForm) if(response.status===200){ this.$message({ type:'success', message:'登錄成功！' }) // 獲取到token值 const token = response.data.token// 下面三種保存token值位置方式（任選其一即可,亦可都保存） // 將token值保存到localStorage中 // window.localStorage.setItem('token',token)
// 將token值保存到sessionStorage中 window.sessionStorage.setItem('token',token)
// 將token值保存到cookieStore中 // window.cookieStore.set('token',token)
//正確跳轉首頁面 this.$router.push({name:'index'}) } },
//axios發送post請求，傳遞form表單 async submitLogin(){ const params=qs.stringify(this.loginForm) const response = await axios.post("http://.4..1xx8:18899/login/",params) console.log("response:",response) if(response.status===200){ this.$message({ type:'success', message:'登錄成功！' }) this.$router.push({name:'index'}) } },
//如何發送http請求，傳遞json引數 （任選其一） // ------------------------------------------------方法一---------------------------------------------- // (該方法是成功時的，失敗時后面介紹處理）： async submitLogin1(){ const params={ username:this.loginForm.username, password:this.loginForm.password } const response = await axios.post("http://xxx.4.xx07.xxx8:18899/login/",params) console.log("response:",response) if(response.status===200){ this.$message({ type:'success', message:'登錄成功！' }) this.$router.push({name:'index'}) // 獲取到token值 const token = response.data.token
// 下面三種保存token值位置方式（任選其一即可,亦可都保存） // 將token值保存到localStorage中 // window.localStorage.setItem('token',token)
// 將token值保存到sessionStorage中 window.sessionStorage.setItem('token',token)
// 將token值保存到cookieStore中 window.cookieStore.set('token',token) } /* ====【擴展】=== 三者的區別： localStorage:本地持久性保存，除非手動洗掉 sessionStorage：會話存盤，瀏覽器關閉后洗掉 cookieStore：持久化存盤，前后端分離的會存盤cookie，但是獲取不便 前后端不分離時，都會自帶cookie */ },
// --------------------------------------方法二----------------------------------- submitLogin2(){ console.log('點擊了登錄',this.loginForm); const params ={ username:this.loginForm.username, password:this.loginForm.password } // 發送post請求 const res = axios.post("http://xxx.4.xxx.1xxx8:18899/login/",params) console.log("res:",res)
// 設定回呼函式，接識訓傳的回應物件 // 異步操作成功時 執行的回呼函式 res.then(response =>{ console.log("請求成功"); console.log("response",response); })
// 異步回呼失敗時執行的回呼函式 res.catch(error =>{ console.log("請求失敗"); console.log("response:",error.response); }) } } </script>
--end--
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547961.html
標籤：其他
下一篇：pdf.js 使用