解决 vue-admin-template 退出登录,无法跳转到登录页面

使用的前端vue组件的 vue-admin-template 框架进行修改

关于退出登录功能,退出成功后不跳转到登录页面,必须手动清空缓存才能跳转的问题

经过多次尝试最终解决,如下:

1. 在浏览器中使用F12查看 存在缓存中cookies值,
   
2. 获取出在cookies中存储的 名称为"vue_admin_template_token",需要在退出登录的时候将这个token给删除掉,才能退出登录,前端代码如下:

logout() {
      this.$confirm("确定退出系统?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          this.$store.dispatch("logout");
          this.$store.commit("SET_PERMS", "");
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          setTimeout(() => {
          //最重要的就是这个,删除cookies 
            Cookies.remove("vue_admin_template_token");
            location.reload(); //不能省，强制跳到登陆页
            this.$router.push(`/login`);
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });

在以上代码中需要提前安装,导入cookies,如下

import Cookies from "js-cookie";

以上就可以解决退出成功后但不跳转到登录页面的问题

以上市自己学习的时候遇到的问题,用作记录,仅供参考