登出去除token 信息

zhongrj

2022-12-26 de69b4e78bfbd4023cb787ebeec5fbbaccc64733

登出去除token 信息

 src/api/login/login.js

@@ -37,3 +37,15 @@
    },
  });
};


/**
 * 登出
 */
export const logout = () =>{
  return request({
    url: '/api/blade-auth/oauth/logout',
    method: 'get',
    params: {}
  })
}

 src/store/modules/user.js

@@ -1,4 +1,4 @@
import { loginByUsername } from "@/api/login/login";
import { loginByUsername,logout } from "@/api/login/login";
import {Message} from 'element-ui'
import md5 from "js-md5";
import * as auth from '@/utils/auth'
@@ -41,6 +41,19 @@
          });
      });
    },
    //登出
    LogOut({commit}) {
      return new Promise((resolve, reject) => {
        logout().then(() => {
          commit('SET_TOKEN', '');
          auth.removeToken();
          auth.removeUserInfo();
          resolve();
        }).catch(error => {
          reject(error)
        })
      })
    },
  },
  mutations:{
    SET_TOKEN: (state, token) => {

 src/views/lyout/index.vue

@@ -18,8 +18,8 @@
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                                    subItem.menuName
                            }}
        subItem.menuName
}}
                        </div>
                    </div>
                </div>
@@ -37,8 +37,8 @@
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                                    subItem.menuName
                            }}
        subItem.menuName
}}
                        </div>
                    </div>
                </div>
@@ -46,12 +46,12 @@

            <!-- 用户登录展示的 -->
            <div class="user-infor" @click="openUser">
                <div class="userIcon" :class="{on: userOn == true}">
                <div class="userIcon" :class="{ on: userOn == true }">
                    <i class="el-icon-user-solid"></i>
                </div>
                <div class="userDetail" v-if="isShowUserDetail">
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{user.user_name}}</div>
                    <div class="userName">用户名：{{ user.user_name }}</div>
                    <div class="userBtn">
                        <div class="edit" @click="goTOLogout">
                            <img src="../../../public/img/bg/editLogin.webp" alt />
@@ -95,7 +95,7 @@
<script>
import getUserInfo from '@/utils/auth'
export default {
    data () {
    data() {
        return {
            menuLeftList: [
                {
@@ -148,19 +148,19 @@
            currentUrl: '/lyout/home',
            userOn: false,
            isShowUserDetail: false,
            user:{}
            user: {}
        }
    },

    created () {
    created() {
        this.currentUrl = this.$route.path
        this.user = getUserInfo()
        console.log(this.user,4451211)
        console.log(this.user, 4451211)
    },

    watch: {
        $route: {
            handler (newPath, oldPath) {
            handler(newPath, oldPath) {
                this.currentUrl = newPath.path

                this.$nextTick(() => {
@@ -180,14 +180,15 @@
        }
    },

    mounted () {
    mounted() {
    },

    methods: {
        //登出
        goTOLogout(){
            //跳转登录页
            this.$router.push({ path: "/login" });
        goTOLogout() {
            this.$store.dispatch("LogOut").then(() => {
                this.$router.push({ path: "/login" });
            });
        },
        /**
         * @description: 路由跳转的事件
@@ -195,7 +196,7 @@
         * @param {*} e 子元素上绑定的的自定义属性
         * @return {*} 没有返回值
         */
        goToPath (params) {
        goToPath(params) {
            if (params.openExternal) {
                window.open(params.path)
                return
@@ -212,7 +213,7 @@

        },

        flexibelClick () {
        flexibelClick() {
            this.show = !this.show

            if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)
@@ -232,7 +233,7 @@
            }
        },

        resize (val, flag = false) {
        resize(val, flag = false) {
            this.boxWidth = val

            this.show = flag
@@ -257,7 +258,7 @@
            })
        },

        openUser () {
        openUser() {
            this.userOn = !this.userOn
            this.isShowUserDetail = !this.isShowUserDetail
        },
@@ -444,6 +445,7 @@
            .userIcon.on {
                color: rgba(252, 189, 86, 1);
            }

            .userDetail {
                width: 180px;
                height: 92px;
@@ -466,6 +468,7 @@
                    border-left-color: transparent;
                    border-right-color: transparent;
                }

                .userName {
                    width: 100%;
                    height: 40px;
@@ -477,6 +480,7 @@
                    position: absolute;
                    top: 0px;
                }

                .userBtn {
                    width: 100%;
                    height: 50px;
@@ -486,13 +490,14 @@
                    justify-content: space-around;
                    padding-top: 4px;

                    & > div {
                    &>div {
                        width: 100px;
                        height: 40px;
                        background-color: rgba(168, 222, 255, 0.6);
                        border-radius: 4px;
                        cursor: pointer;
                        line-height: 44px;

                        img {
                            width: 76px;
                            height: 20px;