一,前端获取后端传入的token等
后端在配置了JWT认证之后,前端在发送请求时需要带上token,这时我们需要获取后端传入的token字符串,并存储下来,当再次发起其他请求时,需要在Header头部加入token
//登录方法
//对话框登录方法
function Login(){
let user={
userName:form.name,
password:form.password
}
axios.post('Login/Login',user).then((res:any)=>{
if(res!=null){
ElMessage({
message: '登录成功! 你好 '+res.data.data.userName,
type: 'success',
})
//关闭对话框
dialogFormVisible.value = false
router.push({path:'/'})
}
//使用localStorage存储token,isAdmin
localStorage.setItem("token",res.data.token)
localStorage.setItem("isAdmin",res.data.isAdmin)
localStorage.setItem("userName",res.data.data.userName)
}).catch((res:any)=>{
ElMessage({
message: res.data.errorMessage,
type: 'success',
onClose(){
}
})
})
}
这里使用localStorage.setItem("token",res.data.token)
获取到了token
,当我们再次发起请求时,需要在Header带上token
,我们需要在请求拦截器中配置一下
import axios from 'axios'
//引入
// 创建一个 axios 实例
const initAxios = axios.create({
baseURL:'https://localhost:7085/',
timeout: 60000, // 请求超时时间毫秒
withCredentials: true, // 异步请求携带cookie
headers: {
// 设置后端需要的传参类型
'Content-Type': 'application/json',
'token': 'your token',
'X-Requested-With': 'XMLHttpRequest',
'Access-Control-Allow-Origin':'*',
},
})
// 添加请求拦截器
initAxios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
//var token = store.getToken();
var token = localStorage.getItem("token");
if(token!=null){
config.headers.Authorization = "Bearer "+token
}
return config
},
function (error) {
// 对请求错误做些什么
console.log(error)
return Promise.reject(error)
}
)
// 添加响应拦截器
initAxios.interceptors.response.use(
function (response) {
console.log(response.data)
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
// dataAxios 是 axios 返回数据中的 data
const dataAxios = response.data
// 这个状态码是和后端约定的
const code = dataAxios.reset
return dataAxios
},
function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
console.log(error)
return Promise.reject(error)
}
)
export default initAxios
二,前端界面的开发进度
- 整体的效果
- 注销的效果
function logout(){
localStorage.removeItem("token");
localStorage.removeItem("isAdmin");
localStorage.removeItem("userName");
ElMessage({
message: '正在注销...',
type: 'success',
onClose(){
//刷新界面
reload()
}
})
}
这里暂时没发起请求,只是清空了持久化的数据,模拟
- 注销效果如下
- 注销以后的登录提示
- 加载登录
- 登录界面
- 登录成功结果