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> 秒后直接跳转登录页面</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; // }, } }) 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10686.html