需求:从其他入口跳转到我的项目,跳转时会在url里面携带token,判断如果有token就直接跳转到首页,没有的话才会走登录页面。

实现思路:
在login页面前面加一个空白页sso.vue,路由里面添加空白页sso的路由,在sso页面mounted函数获取上个页面url中的token,如果获取到了,存到sessionStorage并跳转首页,如果没有就跳转login页面

sso.vue

<template>
  <div class="sso">
    <h2>正在跳转...</h2>
  </div>
</template>

<script>
export default {
  mounted() {
    let token = this.$route.query.token 

    if(token ) {
      window.sessionStorage.setItem("token ", token);
      this.$router.push('/index') // 有token直接跳转首页
    }else{
      this.$message({
          message: '没有权限,正在跳转登录页面...',
          center: true
        });
        setTimeout(function(){
          this.$router.push('/login')
        },1000)
    }
  }
}
</script>

<style>
.sso {
  width: 100px;
  height: 100px;
}
</style>

router.js添加sso

const routes = [
  {
    path: '/sso',
    name: '/sso',
    component: () => import('@/views/sso/index.vue'),
  },// 将sso页面添加到所有页面前面,下面的路由按自己项目添加
  {
    path: '/',
    redirect: '/login'
  },
   {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/login.vue'),
  }]
Logo

前往低代码交流专区

更多推荐