？問題 ：如何添加token,解決鑒權問題 方案：通過登錄頁面，發送請求，獲取到token值，並把token值存儲（localStorage、sessionStorage、cookieStore），示例如下： <template> <el-form label-width="80px"> <el-f ...
？問題 ：如何添加token,解決鑒權問題
方案：通過登錄頁面，發送請求，獲取到token值，並把token值存儲（localStorage、sessionStorage、cookieStore），示例如下：
<template> <el-form label-width="80px"> <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--
