vue 登录拦截及权限管理

深碍√TFBOYSˉ_ 2021-08-26 23:08 421阅读 0赞

一.登录拦截

用户登录成功后服务端返回token的值，然后前端使用axios中请求拦截器（service.interceptors.request.use）再每个的请求接口上加上Authorization:token的值，服务端通过这个Authorization来获取token的值，来进行判断token的值是否过期，如果过期则接口返回403,前端得到403的状态，则提示用户返回登录页。

1.request.js

import axios from 'axios';
    import { Message, MessageBox } from 'element-ui';
    import router from '../router';
    /**
     * 提示函数
     * 禁止点击蒙层、显示一秒后关闭
     */
    const tip = msg => {
    	Message({
    		message: msg,
    		duration: 1000
    	})
    }
    
    /**
     * 跳转登录页
     * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
     */
    const toLogin = () => {
    	router.replace({
    		path: '/login'
    	});
    }
    
    // 创建axios实例
    const service = axios.create({
    	baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    	// withCredentials: true, // send cookies when cross-domain requests
    	timeout: 5000 // request timeout
    })
    // 设置post请求头
    service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    
    // 请求拦截器
    service.interceptors.request.use(
    	config => {
    		// 登录流程控制中，根据本地是否存在token判断用户的登录情况
    		// 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
    		// 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
    		// 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
    		const token = localStorage.getItem('token');
    		token && (config.headers.Authorization = token);
    		return config
    	},
    	error => {
    		// 处理请求错误
    		return Promise.reject(error)
    	}
    )
    // 响应拦截器
    service.interceptors.response.use(
    	//请求成功
    	response => {
    		const res = response.data;
    		if (res.code !== 200 && res.status !== 200) {
    			return Promise.reject(res)
    		} else {
    			return res
    		}
    	},
    	//请求失败
    	error => {
    		const {
    			response
    		} = error;
    		if (response) {
    			// 请求已发出，但是不在30分钟的范围
    			errorHandle(response.status, response.data.message);
    			return Promise.reject(response);
    		} else {
    			// 处理断网的情况
    			// eg:请求超时或断网时，更新state的network状态
    			// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
    			// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
    			// store.commit('changeNetwork', false);
    		}
    	}
    )
    /**
     * 请求失败后的错误统一处理
     * @param {Number} status 请求失败的状态码
     */
    const errorHandle = (status, other) => {
    	// 状态码判断
    	switch (status) {
    		// 401: 未登录状态，跳转登录页
    		case 401:
    			toLogin();
    			break;
    		// 403 token过期
    		// 清除token并跳转登录页
    		case 403:
    			localStorage.removeItem('token');
    			MessageBox({
    				message: '登录过期，请重新登录',
    				callback: action => {
    					toLogin();
    				}
    			})
    			break;
    		// 404请求不存在
    		case 404:
    			tip('请求的资源不存在');
    			break;
    	}
    }
    export default service

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

2.登录接口

interface.js
    
    import request from '@/utils/request'
    const base = {
    	local: 'localhost',
    	dev: 'http://10.16.3330.39:8093/',
    }
    
    
    //登录接口
    export function dischargeLogin(params) {
    	return request.post(`${base.dev}discharge/login`, params)
    }
    
    login.vue
    
    import * as Api from "@/api/interface";
     
    Api.login(this.loginForm).then(res=>{
        this.$router.push({
            path: "/home"
        });
        localStorage.setItem("token", res.data.token);
    }).catch((e) => {
        Message({
            message: e.msg,
            type: 'error',
            duration: 1000
        })
    });

二.权限管理

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/d1a575ec341546469a804b517e1604bb.png