<template>
<div class="container">
<section class="tasks">
<h1 class="tasks__title">To do list</h1>
<ul class="tasks__list" v-for="item in md" :key="item">
<li
class="tasks__item"
draggable="true"
@dragstart="onDragStart($event, item)"
@dragend="onDragEnd($event, item)"
>
{{ item }}
</li>
</ul>
</section>
</div>
</template>
<script>
export default {
data() {
return {
md: ["learn HTML", "learn CSS"],
};
},
name: "Home",
methods: {
onDragStart(e, item) {
console.log(e);
e.target.classList.toggle("selected");
e.dataTransfer.dropEffect = "move";
e.dataTransfer.effectAllowed = "move";
// e.dataTransfer.setData("itemId", item.id.toString());
},
onDragEnd(e, item) {
alert("end");
e.target.classList.toggle("selected");
},
},
};
</script>
<style>
body {
font-family: "Tahoma", sans-serif;
font-size: 18px;
line-height: 25px;
color: #164a44;
background-color: #b2d9d0;
}
.container {
display: flex;
justify-content: center;
}
.tasks__title {
margin: 50px 0 20px 0;
text-align: center;
text-transform: uppercase;
}
.tasks__list {
margin: 0;
padding: 0;
list-style: none;
}
.tasks__item {
max-width: 250px;
margin-bottom: 10px;
padding: 5px;
text-align: center;
border: 2px dashed #b2d9d0;
border-radius: 10px;
cursor: move;
background-color: #dff2ef;
transition: background-color 0.5s;
}
.tasks__item:last-child {
margin-bottom: 0;
}
.selected {
opacity: 0.3;
background: red;
}
</style>export default function axiosSetUp() {
// alert('sss')
// point to your API endpoint
//axios.defaults.baseURL = "<http://127.0.0.1:8000/api/>";
// Add a request interceptor
axios.interceptors.request.use(
function(config) {
const token = store.state.auth.token;
// Do something before request is sent
// const token = store.state.auth.token;
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
axios.interceptors.response.use(
function(response) {
//await store.dispatch("refreshToken");
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response;
},
async function(error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
const originalRequest = error.config;
if (
error.response.status === 401 &&
originalRequest.url.includes("auth/jwt/refresh/")
) {
//store.commit("clearUserData");
router.push("/login");
return Promise.reject(error);
} else if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
await store.dispatch("refreshToken");
return axios(originalRequest);
}
return Promise.reject(error);
}
);
//store.dispatch("refreshToken")
}async refreshToken({commit}) {
//const token = localStorage.getItem('token');
console.log(this.state.auth.refresh_id);
var resp = await axios({
url: "xxx xxx xxxx",
data: {
Refresh_id: this.state.auth.refresh_id,
ClientName: "MainProject",
},
method: "POST",
});
const token = resp.data.access_token;
const user = resp.data.UserId;
const roles = resp.data.UserRoles;
const refresh_id = resp.data.refresh_id;
localStorage.setItem("token", token);
localStorage.setItem("role", roles);
localStorage.setItem("refresh_id", refresh_id);
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
commit("auth_success", {
token: token,
user: user,
roles: roles,
refresh_id: refresh_id,
});
console.log('refTok',resp)
return await resp;
},