in fact like this kind of article online already has a lot of good, writing this article, write this article, so take notes, to prevent later forget

used: 1, vuex 2, Axios 3, vue-route

landing process:

1, submit a landing form, get the back of the back of the data

2, will be The data is stored in the vuex

vuex configuration

, which directly skip the installation and so on. EM ('token'), such a refresh page does not require a re - login to const state = {user: window.sessionStorage.getItem ('user'), token: window.sessionStorage.getItem ('token')} const mutations = {/ / / / / / / / / / / = {} = {= = = {= = = {} Data window.sessionStorage.setItem ('token', data)}, / / / / obtain the user name GET_USER: (state, data) => {/ / / / / / / / / / data window.sessionStorage.setItem ('user',)} Ser = null window.sessionStorage.removeItem ('token') window.sessionStorage.removeItem ('user')}} const actions = {{{{} export default new Vuex.Store ({{}) If token is true, the two things that users have landed on sessionStorage and token are very simple to use their own Baidu

2, and don't forget to introduce store in main.js, and store

main.js

. Components: {App}, template:'< App/>, '}) 

vue-route configuration

. X from'../components/Index'import store from'../store/index' Vue.use (Router) const router = new ({{{[{] / '/'}, {} Meta: {requireAuth: true / / add this field to indicate that entering this route is the}}}})}}) / / registered global hook is used to intercept navigation router.beforeEach ((to, from, next) => {const token = store.state.token if] F {/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / token / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / token {/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / Efault router

here I use router.beforeEach to implement interceptor landing,

1, add our own requireAuth
2 to the meta that needs validation, router.beforeEach in requireAuth verify whether the component needs to land
3. Go to the login page

axios to send a request

 submitLogin () {this.$refs.loginForm.validate (valid =>); {{} {{}; If (response.status = = = = 200) {this.$store.commit ('SET_TOKEN', response.data.token) this.$store.commit ('GET_USER', response.data.user) this.$message ({message: 'landing success, type:'success'}) {} {} Console.log (error)})} else {console.log ('error submit!!) return false}})}), the 

background I do not write, I use the mock.js interception Ajax because I use it because I have some direct disregard of the above code. .$store.commit to update the data in vuex

2, after landing success, jump to this.$router.push () jump page,

here notice, if you navigate the hook in front of the hook with query: {redirect: to.fullPath}, here this.$router.push (this.$route.query.redirect); so that the page can Jump to

, you jump to the landing page to the route to go to the route

above is all the content of this article, I hope to help you, and also hope that you can support a lot of the script home.

you might be interested in:

This paper fixed link:http://www.script-home.com/example-code-for-vueaxios-novice-practice-to-implement-landing.html | Script Home | +Copy Link

Article reprint please specify:Example code for vue+axios novice practice to implement landing | Script Home

You may also be interested in these articles!