stay vue in , You can use it **Storage(sessionStorage,localStorage)** To store token, It can also be used vuex To store ( But we should consider the problem of page refresh and data disappearance , Can be in vuex use Storage), Here is how to use localStorage To store :

After successful login request , Will return a token value , use loaclStorage preservation
localStorage.setItem('token',res.data.token)
stay main.js The judgment of setting global request header and response return in
// set up axios Request header join token Axios.interceptors.request.use(config => { if (config.push
=== '/') { } else { if (localStorage.getItem('token')) {
// Add in request header token, The name should be the same as that of the request header received by the back end token The same name config.headers.token=localStorage.getItem(
'token'); } } return config; }, error => { return Promise.reject(error); });
//============================= // Respond back token Is it overdue Axios.interceptors.response.use(
response=> { console.log(' Respond back :'+response.data.code) // And back end token Invalid return code Convention 403 if (
response.data.code == 403) { // quote elementui message prompt box ElementUI.Message({
message: ' The identity is invalid ', type: 'err' }); // eliminate token localStorage.removeItem('token ');
// Jump router.push({name: 'login'}); } else { return response } }, error => {
return Promise.reject(error); })
stay router In index Set the global guard to determine whether it exists token, If it doesn't exist, return to the login page
router.beforeEach((to, from, next) => { //to Where to from Where to leave next Jump Empty means release if (to.
path=== '/') { // If jump to login , Let it go next(); } else { // take out localStorage judge let token =
localStorage.getItem('token '); if (token == null || token === '') { console.log
(' Please log in first ') next({name: 'login'}); } else { next(); } }});

Technology
©2020 ioDraw All rights reserved
【webpack】DLL plugin Principle analysis Combined with source code Transformer The most comprehensive , The deepest analysis filemanager-webpack-plugin Turn resources into zip Package and archive JavaScript study ( Function declaration and parameters ) mean value - Implementation and application of variance model _python_ Data analysis _9JAVA Snake games ( Source code + notes )SpringBoot integrate Redisson Implement delay queue python code , Easy to complete Snake games Thread.setDaemon Set up the Daemons Unity Code dynamic creation of preform in editor expansion function