前端登录流程

1.登录页 输入账号密码登录调用登录接口,参数一般为账号密码(一般密码需要加密)，接口返回token，前端将token保存至本地 后续接口需要用到

loginApi.login({ params })
        .then((res) => {
          if (res.code === 200) {
                this.$message.success("登录成功");
                localStorage.setItem(LSKey.token, res.data.token);
                    this.$router.push("/home/index");
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                })
                .finally(() => {
                    this.loading = false;
                });
           }

2. 在axios请求拦截器将本地的token挂载到请求头 供接口使用(判断token过期,顶号等)，出现异常在响应拦截器弹出提示清空token用户信息返回登录页

//创建axios的一个实例
var instance = axios.create({
    timeout: 20000, //设置超时
});

//------------------- 一、请求拦截器 
instance.interceptors.request.use(
    function (config) {
        if (localStorage.getItem(LSKey.token)) {
            config.headers["X-Auth-Token"] = localStorage.getItem(LSKey.token);
        }
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);
//----------------- 二、响应拦截器
instance.interceptors.response.use(
    function (response) {
        let res = response.data;
        if (res.code === 200) {
            return res;
        } else if (
            // 401, 未提供、未提供有效token、登陆信息已过期，请重新登陆、您的账号已在另一台设备登陆，如非本人操作，请立即修改密码
            // 340001, "用户无权限"
            res.code === 401 ||
            res.code === 340001 ||
            res.code === 360001
        ) {
            authError({
                callback: () => {
                    localStorage.removeItem(LSKey.token);
                    vm.$store.dispatch("user/clearUserInfo");
                    vm.$store.dispatch("pagettab/clearTabList");
                    sessionStorage.clear();
                    vm.$message.error(res.msg || "请稍后重试");
                    //如果不是登录页
                    if (vm.$route.path != "/login") {
                        let timer = setTimeout(() => {
                            clearTimeout(timer);
                            vm.$store.dispatch("user/loginOutHandle");
                            vm.$router.push("/login?type=userLogout");
                        }, 1000);
                    }
                },
            });
            return Promise.reject(res);
        } else {
            authError({
                callback: () => {
                    vm.$message.error(res.msg || "请稍后重试");
                },
            });
            return Promise.reject(res);
        }
    },
    function (error) {
        // 对请求错误做些什么
        if (error.response) {
            authError({
                callback: () => {
                    vm.$message.error(error.response.msg || "请稍后重试");
                },
            });
        }
        return Promise.reject(error.response.data);
    }
);

3.在项目进入页 created或者mounted 获取用户信息，因为token挂载到请求头上，可获取用户信息接口，存入store中

4.同时还要考虑到用户直接输入对应url进入页面，虽然用户拿着错误的token，访问页面调用接口会异常，响应拦截器会清空打回登录页，但是为了保险需要在路由前置守卫进行拦截,也可拓展权限

export function beforeEach(to, from, next, router) {
    if (to.path != "/login") {
        if (!localStorage.getItem(LSKey.token)) {
              return next({ path: "/login", query: {} });
        } else {
            let accountType = getStoreSession().state.user.roles;
            if (to.meta.requiresAuth && !accountType.includes("1")) {
                Message.error("您没有权限访问此页面！");
                getStoreSession().dispatch("user/loginOutHandle");
                router.push("/login?type=userLogout");
            } else {
                return next();
            }
        }
    }
    return next();
}