1. The user logs in for the first time, calls the back-end login interface, and sends the user name and password
2. The backend verifies that the user name and password are correct, and returns a token if successful.
3. The front end gets the token, stores the token in localStorge () and vuex, and jumps to the homepage
4. Every time the front end jumps the route, it determines whether there is a token in localStorge, and if it does not, it jumps to the login page
5. Every time you call the backend, you must add a token to the request header
6. The backend judges whether there is a token. If there is a token, the token is verified. If the verification succeeds, the data is returned. If the verification fails, the token expires, or if it does not, it returns 401
7. If the front end, get the 401, clear the token and jump to the login page,
<template>
<div>
<input type="text" v-model="loginForm.username" placeholder="用户名"/>
<input type="text" v-model="loginForm.password" placeholder="密码"/>
<button @click="login">登录</button>
</div>
</template>
export default {
data () {
return {
loginForm: {
username: '',
password: '' }
};
},
methods: {
...mapMutations(['changeLogin']),
login () {
let _this =this;
///// Determine whether the account password is entered, if not, the alert will come out
if(this.loginForm.username === '' ||this.loginForm.password === '') {
alert ('Account or password cannot be empty');
} else {
this.axios({
method: 'post',
url: '/user/login',
data: _this.loginForm
}).then(res => {
console.log(res.data);
_this.userToken = 'Bearer ' + res.data.data.body.token;
// Save the user token to vuex _this.changeLogin ({Authorization: _this.userToken});
_this.$router.push('/home');
alert ('Login successful');
}).catch(error => {
alert ('wrong account or password');
console.log(error);
});
}
}
}
};
在store文件夹下的index.js 添加 token import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { // 存储token Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '' }, mutations: { // 修改token，并将token存入localStorage changeLogin (state, user) { state.Authorization = user.Authorization; localStorage.setItem('Authorization', user.Authorization); } } }); export default store;
Configure index.js import Vue from 'vue' ; import Router from 'vue-router' ; import login from '@ / components / login' ; import home from '@ / components / home' ; Vue.use (Router); const router = new Router ({ routes: [ { path: '/' , redirect: '/ login' }, { path: '/ login' , name: 'login' , component: login } , { path: '/ home' , name: 'home' , component: home } ] }); // Navigation guard /// Use router.beforeEach to register a global front guard to determine whether the user is logged in router.beforeEach ((to, from , next) => { if (to.path === '/ login' ) { next (); } else { let token = localStorage.getItem ('Authorization' ); if (token === 'null' || token === '' ) { next ( '/ login' ); } else { next (); } } }); export default router;
Request header plus token Add // main request interceptor, add token axios.interceptors.request.use ( config => { if (localStorage.getItem ('Authorization' )) { config.headers .Authorization = localStorage.getItem ('Authorization' ); } return config; }, error => { return Promise.reject (error); });
If the front end gets a status code of 401, clear the token information and jump to the login page localStorage.removeItem ( 'Authorization' ); this . $ Router.push ('/ login' ); link: https: // www.jianshu .com / p / 32e6eb23147f