vue中，401页面——您没有权限访问当前页面，直接跳转登录页

vue中，401页面——您没有权限访问当前页面，直接跳转登录页

效果

代码

1、页面

src\components\errorPage\401page.vue

<template>
  <div style="height:100%;">
    <div class="wscn-http404">
      <div class="pic-404">
        <img class="pic-404__parent" :src="img_404" alt="404">
        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
      </div>
      <div class="bullshit">
        <div class="bullshit__oops">OOPS!</div>
        <!--    <div class="bullshit__info">版权所有
              <a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
            </div>
            <div class="bullshit__headline">{{ message }}</div>-->
        <div class="bullshit__info">您没有权限访问当前页面，<span class="bullshit__return-second">{{second}}</span> &nbsp;秒后直接跳转登录页面</div>
        <!-- <a href="/" class="bullshit__return-home">返回首页</a>-->
        <el-button @click="back" icon='arrow-left' class="bullshit__return-home">直接跳转登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '@/store/index.js'
import { ref, inject } from "vue";
import img_404 from '@/assets/401_images/401.png'
import img_404_cloud from '@/assets/404_images/404_cloud.png'
import * as allCookie from '../../utils/utils.js';

  export default {
    name: 'error_401',
    data() {
      return {
        img_404,
        img_404_cloud,
        second:5,
        interval:"",
        iscLoginOutPath: inject('iscLoginOutPath')
      }
    },
    methods:{
      back() {
        if(this.isIsc){ //isc
          var that = this;
          this.$http.post(process.env.VUE_APP_API_HOST+ '/isc/iscLogout',{
            "isc":"web"
          }).then(function () {
            that.$router.push("/homePage");
            //        window.sessionStorage.clear();
            if(window.sessionStorage.getItem('userId')) {
              window.sessionStorage.removeItem('roles');
              window.sessionStorage.removeItem('tokenId');
              window.sessionStorage.removeItem('userName');
              window.sessionStorage.removeItem('userId');
              window.sessionStorage.removeItem('status');
              window.sessionStorage.removeItem('isSgcc');
              window.sessionStorage.removeItem('Web-Token');
              window.sessionStorage.removeItem('ser');
              window.sessionStorage.removeItem('userRealName');
              window.sessionStorage.removeItem('deptname');
              window.sessionStorage.removeItem('parentName');
              window.sessionStorage.removeItem('parentId');
            }
            window.sessionStorage.getItem('tokenId')?window.sessionStorage.removeItem('tokenId'):'';
            allCookie.CookieRemove('web_token');
          })
          let str = window.location.href;
          let routerIndex = str.lastIndexOf("#");
          let url = str.substr(0,routerIndex); //获取路由
          window.location.href = this.iscLoginOutPath + '?service=' + url + "#/homePage";
        }else{  //轻量级
          this.$router.push({path: '/login'});
        }
      },
      clearSessionAndCookie(){
        //        window.sessionStorage.clear();
        if(window.sessionStorage.getItem('userId')) {
          window.sessionStorage.removeItem('roles');
          window.sessionStorage.removeItem('tokenId');
          window.sessionStorage.removeItem('userName');
          window.sessionStorage.removeItem('userId');
          window.sessionStorage.removeItem('status');
          window.sessionStorage.removeItem('isSgcc');
          window.sessionStorage.removeItem('Web-Token');
          window.sessionStorage.removeItem('ser');
          window.sessionStorage.removeItem('userRealName');
          window.sessionStorage.removeItem('deptname');
          window.sessionStorage.removeItem('parentName');
          window.sessionStorage.removeItem('parentId');
        }
        window.sessionStorage.getItem('tokenId')?window.sessionStorage.removeItem('tokenId'):'';
        allCookie.CookieRemove("web_token");
        
        // 写法二
        // const userStore = useUserStore() 
        // userStore.userName = undefined;
        // userStore.userType = undefined;

        // console.log(999,this.$store);  写法一
        // this.$store.state.userName = undefined;
        // this.$store.state.userType = undefined;
      }
    },
    created(){
      this.clearSessionAndCookie();
      this.interval = setInterval(() => {
        this.second--;
        if (this.second === 0) {
          this.back();
        }
      }, 1000);
    },
    destroyed(){
      clearInterval(this.interval);
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .wscn-http404 {
    position: relative;
    width: 1200px;
    margin: 20px auto 60px;
    padding: 0 100px;
    overflow: hidden;
    .pic-404 {
      position: relative;
      float: left;
      width: 600px;
      padding: 150px 0;
      overflow: hidden;
      &__parent {
        width: 100%;
      }
      &__child {
        position: absolute;
        &.left {
          width: 80px;
          top: 17px;
          left: 220px;
          opacity: 0;
          animation-name: cloudLeft;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1s;
        }
        &.mid {
          width: 46px;
          top: 10px;
          left: 420px;
          opacity: 0;
          animation-name: cloudMid;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1.2s;
        }
        &.right {
          width: 62px;
          top: 100px;
          left: 500px;
          opacity: 0;
          animation-name: cloudRight;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1s;
        }
        @keyframes cloudLeft {
          0% {
            top: 17px;
            left: 220px;
            opacity: 0;
          }
          20% {
            top: 33px;
            left: 188px;
            opacity: 1;
          }
          80% {
            top: 81px;
            left: 92px;
            opacity: 1;
          }
          100% {
            top: 97px;
            left: 60px;
            opacity: 0;
          }
        }
        @keyframes cloudMid {
          0% {
            top: 10px;
            left: 420px;
            opacity: 0;
          }
          20% {
            top: 40px;
            left: 360px;
            opacity: 1;
          }
          70% {
            top: 130px;
            left: 180px;
            opacity: 1;
          }
          100% {
            top: 160px;
            left: 120px;
            opacity: 0;
          }
        }
        @keyframes cloudRight {
          0% {
            top: 100px;
            left: 500px;
            opacity: 0;
          }
          20% {
            top: 120px;
            left: 460px;
            opacity: 1;
          }
          80% {
            top: 180px;
            left: 340px;
            opacity: 1;
          }
          100% {
            top: 200px;
            left: 300px;
            opacity: 0;
          }
        }
      }
    }
    .bullshit {
      position: relative;
      float: left;
      width: 330px;
      padding: 180px 0;
      overflow: hidden;
      &__oops {
        font-size: 32px;
        font-weight: bold;
        line-height: 40px;
        color: #1482f0;
        opacity: 0;
        margin-bottom: 20px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
      }
      &__headline {
        font-size: 20px;
        line-height: 24px;
        color: #1482f0;
        opacity: 0;
        margin-bottom: 10px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
      }
      &__info {
        font-size: 13px;
        line-height: 21px;
        color: grey;
        opacity: 0;
        margin-bottom: 30px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
      }
      &__return-second{
        color:red;
      }
      &__return-home {
        display: block;
        float: left;
        width: 130px;
        height: 36px;
        background: #1482f0;
        border-radius: 100px;
        text-align: center;
        color: #ffffff;
        opacity: 0;
        font-size: 14px;
        /* line-height: 36px;*/
        cursor: pointer;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
      }
      @keyframes slideUp {
        0% {
          transform: translateY(60px);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }
    }
  }
</style>

2、路由

src\router\index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';

type NewRouteRecordRaw = RouteRecordRaw & {
  redirect?: string
}

const routes: Array<RouteRecordRaw> = [
  // 404页面
  {
    path: '/errorPage',
    name: 'ErrorPage',
    component: () => import('@/components/errorPage/404page.vue'),
  },
  // 401页面
  {
    path: '/401',
    name: '401',
    component: () => import('@/components/errorPage/401page.vue'),
  },
    //如需点击返回首页的路由跳转homePage
  {
    path: '/',
    name: 'home',
    redirect: '/homePage',
  },
  // 首页
  {
    path: '/homePage',
    name: 'homePage',
    component: () => import('@/views/homePage.vue')
  },
    // 登录
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/myCenter/accountManagement/loginRegister/login.vue')
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return { left: 0, top: 0 }
  }
})

export default router

src\main.ts

import router from './router'
app.use(router)

router.beforeEach((to, from, next) => {})

const getConfigJson = function () {
  axios.get('serverConfig.json')
    .then((result) => {
      app.provide('iscLoginPath',result.data.iscLoginPath)
      app.provide('iscLoginOutPath',result.data.iscLoginOutPath)
      app.provide('isIsc',result.data.isIsc)
      app.provide('encryptSign',result.data.encryptSign)
      isIsc = result.data.isIsc
      app.mount('#app')
    }).catch((error) => {
      console.log(error)
    })
};
getConfigJson()//调用声明的全局方法

public\serverConfig.json

{
  "iscLoginPath":"http://xdld.baidu.com:22002/idc_sos/login",
  "iscLoginOutPath":"http://xdld.baidu.com:22002/idc_sos/logout",
  "isIdc":true,
  "isAddSecure":false,
  "encryptSign": true  
}

3、配置页面

src\utils\utils.js

/*
 *
 * CookieRemove  name是字段   删除这个cookie
 *
 * */
export function CookieRemove(name) {
  CookieSet(name, null, -1);
}

src\store\index.js

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
    state: () => ({
        count: 123,
        isTrue: true,
        isFalse: true,
        siteId: sessionStorage.getItem("siteId"),  //专区Id
        newsNumber: "",  //消息数
        doubleNum: 1,  //history回退
        navIndex: "",  //导航索引
        navs: [],  //导航菜单
        userName: sessionStorage.getItem("userName"), //用户名
        userType: sessionStorage.getItem("userType"),  //用户类型
        companyType: sessionStorage.getItem("companyType"),  //用户角色
        accountName: sessionStorage.getItem("accountName"),  //
        manualSync: sessionStorage.getItem("manualSync"),  //
        prefectureCode:sessionStorage.getItem('prefectureCode'),
        ZqName:sessionStorage.getItem('ZqName'),
        childMeunId:sessionStorage.getItem('childMeunId'),
        fromRoute:'',
        navsList:[]
    }),
    actions: {
        increment() {
            this.count++
        },
        decrement() {
            this.count--
        },
        changeUserName() {
            this.userName = sessionStorage.getItem('userName')
        },
        getUserType() {
            this.userType = sessionStorage.getItem('userType')
        },
        setCompanyType() {
            this.companyType = sessionStorage.getItem('companyType')
        },
        getAccountName() { 
            this.accountName = sessionStorage.getItem('accountName') 
        },
        getManualSync() { 
            this.manualSync = sessionStorage.getItem('manualSync') 
        },
        getSiteId() { 
            this.siteId = sessionStorage.getItem('siteId') 
        },
        getPrefectureCode() { 
            this.prefectureCode = sessionStorage.getItem('prefectureCode') 
        },
        getZqName() { 
            this.ZqName = sessionStorage.getItem('ZqName') 
        },
        getChildMeunId(){
            this.childMeunId = sessionStorage.getItem('childMeunId')
        }
        //从专区获取的id存储在state中
        // getId: function (state, id) {
        //   state.siteId = id || 0;
        // },
    }
})