Login.vue
<template>
<v-form>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field
v-model="username"
label="Username"
outlined
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
v-model="password"
outlined
label="Password"
style="min-height: 96px"
type="password"
>
</v-text-field>
</v-col>
</v-row>
<div class="text-right">
<v-btn depressed large color="primary">Login</v-btn>
</div>
</v-container>
</v-form>
</template>
<script>
export default {
name: 'Login',
data: function () {
return {
username: null,
password: null
}
},
mounted () {
//
}
}
</script>
router/index.ts
import Vue from 'vue'
import Router from 'vue-router'
import PlayScreen from '@/views/PlayScreen.vue'
import Login from '@/views/Login.vue'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/',
redirect: 'login'
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/playscreen',
name: 'playscreen',
component: PlayScreen
},
]
})
When you do npm run dev
, the created login screen will be displayed initially.
npm install vuex --save
axios is a "Promise-based HTTP client" (from official).
npm install axios --save
Prepare a ʻapifolder directly under
src`, and create common.ts directly under it to prepare common functions of axios.
concentratio #Project root directory
├── config
│ ├── ...
│
├── frontend
│ ├── ...
│ ├── ..
│ ├── .
│ └── src
│ └──api #Create
│ └──common.ts #Create
└── manage.py
src/api/common.ts
import axios from "axios";
const baseRequest = axios.create({
baseURL: "http://localhost:8000",
headers: {
"Content-Type": "application/json",
}
});
/**
*GET request
* @param url URL
*/
function get(url) {
return baseRequest.get(url);
}
/**
*POST request
* @param url URL
*/
function post(url, payload) {
return baseRequest.post(url, payload);
}
export default {
get,
post
};
concentratio #Project root directory
├── config
│ ├── ...
│
├── frontend
│ ├── ...
│ ├── ..
│ ├── .
│ └── src
│ └──store #Create
│ └──authenticates #Create
│ ├──actions.ts #Create
│ └──index.ts.ts #Create
│ └──mutations.ts #Create
└── manage.py
store/authenticates/actions.ts
import commonAxios from "../../api/common";
export default {
LOGIN: function({ commit }, payload) {
return new Promise((success, error) => {
commonAxios.post("/api-token-auth/", payload).then(
response => {
//Processing on success
commit("SET_TOKEN", response.data.token); // mutations.ts SET_Pass the token to the TOKEN function
commonAxios.baseRequest.defaults.headers.common['Authorization'] = `JWT ${response.data.token}`;
success();
}
);
});
}
}
If you forget to add "/ (slash)" at the end of the above url, it will be rejected by CORS and an error will occur.
It took me a long time to notice this, and I was addicted to it for about an hour ...
store/authenticates/index.ts
import actions from './actions';
export const state = {};
export default {
namespaced: true, //Be sure to put it on or off, you will get an error when reading with mapActions of vue.
state,
actions,
mutations
};
store/authenticates/mutations.ts
export default {
SET_TOKEN: function(state, token) {
state.token = token
}
};
Create ʻindex.ts directly under
src / store`
store/index.ts
import Vue from "vue";
import Vuex from "vuex";
import authModules from "./authenticates"; //Load the module under authenticates with the name authModules
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
authModules: authModules,
}
});
Fixed src / main.ts
src/main.ts
.
..
...
import store from "./store"; //add to
...
..
.
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
vuetify: new Vuetify(),
store //add to
});
Fixed Login.vue
Login.vue
<template>
<v-form>
<v-container>
...
..
.
<div class="text-right">
<v-btn depressed large color="primary" @click="login">
Login
</v-btn>
</div>
</v-container>
</v-form>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "Login",
data: function() {
return {
username: null,
password: null
};
},
methods: {
...mapActions("authModules", ["LOGIN"]), //Modularized action.Read LOGIN function from ts
login: function() {
const data = {
username: this.username,
password: this.password
};
this.LOGIN(data).then(res => {
console.log(res);
});
}
},
mounted() {
//
}
};
</script>
After entering the correct username and password, press the login button and check that the response is returned.
It's back!
Just replace console.log (res);
in Login.vue
withthis. $ Router.push ("/ playscreen");
.
I was able to successfully transition to the top page from the login screen.
Recommended Posts