vue登录请求拦截响应，携带token

冷不防 2023-02-23 12:25 31阅读 0赞

main.js
    //引入axios
    Vue.prototype.$axios = axios;
    axios.defaults.baseURL='http://127.0.0.1:8080/';
    axios.interceptors.request.use((config) => {
    	config.headers.token = localStorage.getItem('token');;
    	return config;
    });
    
    axios.interceptors.response.use((config) => {
    	if(config.data.code == 455){
    		ElementUI.Message({
    			  message: config.data.msg,
    			  type: 'error'
    			});
    		return ;
    	}
    	if( config.data.code > 450 &&  config.data.code<460 ){
    		ElementUI.Message({
    			  message: config.data.msg,
    			  type: 'error'
    			});
    	    window.localStorage.clear();
    		router.push("/login");
    	}
    	return config;
    });
    
    router.beforeEach((to,from,next)=>{
    	if(to.path == "/login"){
    		return next();
    	}
    	const token = window.localStorage.getItem("token");
    	//本地获取token，如果没有就返回登录页面
    	if(token==null || token == undefined){
    		return next('/login');
    	}
    	next();
    });

data: function() {
            return {
                param: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                },
            };
        },
        methods: {
            submitForm() {
                this.$refs.login.validate(valid => {
                    if (valid) {
    					axios.post('login?',this.param)
    					.then(response => {
    						//console.log(response);
    						if (response.data && response.data.code == "0") {
    							this.$message.success('登录成功');
    							//localStorage.setItem('user', response.data.data.user);
    							localStorage.setItem('ms_username', this.param.username);
    							localStorage.setItem('ms_password', this.param.password);
    							localStorage.setItem('token', response.data.data.token);
    							localStorage.setItem('timer',response.data.data.user.lastTime);
    							this.$router.push('/');
    						}else{
    							this.$message.error('账号或密码错误');
    						}
    					})
    					.catch(err => {
    						this.$message.error('账号或密码错误请联系管理员');
    						return false;
    					});
                    }
                });
            },
    		submitRegister(){
    			this.$router.push('/register');
    		}	
        },