Vue3与.NET6实战之开发杂记

一，前端获取后端传入的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()
    }
  })
}

这里暂时没发起请求，只是清空了持久化的数据，模拟

• 注销效果如下

• 注销以后的登录提示

• 加载登录

• 登录界面

• 登录成功结果