亲宝软件园·资讯

展开

Vue Router 实现登录后跳转到之前想要访问的页面

CJc_3103 人气:0

简介

该功能主要用于判定用户权限,在用户无权限时重定向至登录页,并在用户完成登录后,再定向至用户之前想要访问的路由;或者用户在任意路由点击登录时,登录成功后返回当前路由。是一个很常规的小功能。

简单示例

本文仅演示路由跳转和导航守卫相关代码的实现,不包含具体的权限验证和登录请求。

实现该功能主要分为四步:

props: ['redirect'],
...
handleLogin() {
  this.$store.dispatch('LOGIN', { somePramsHere })
    .then(() => {
      this.$router.push(
        this.redirect ? { path: this.redirect } : { name: 'Home' }
      );
    })
    .catch((err) => {
      // 登录失败
    });
},

在其他路由的登录入口添加相应的 rediect 参数,如首页的登录链接:

<router-link 
  :to="{
         name: 'Login',
         query: { redirect: $route.fullPath },
       }"
 ><span class="login">登录</span></router-link>

在路由守卫中添加相应的判定逻辑,当用户不具备权限时,重定向至登录页:

import router from './index';
import store from '@/store/index';
import whiteList from './whiteList';
 
router.beforeEach((to, from, next) => {
    if (!store.state.token) {
        // 未登录
        if (
            to.matched.length > 0 &&
            to.matched.some((record) => whiteList.includes(record.path))
            // 此处还可添加用户权限验证相关逻辑,如 to.matched.some(record => record.requiresAuth)
        ) {
            // 该路由不要求用户登录,继续完成导航
            next();
        } else {
            // 用户未登录,且目标路由不在白名单中,重定向至登录页
            next({ name: 'Login', query: { redirect: to.fullPath } });
        }
    else { ... // 已登录时的路由守卫判定 }
    }
}

补充用户退出时的处理

由于导航守卫只有在路由变化时才会被触发,而使用 $router.replace() 模拟刷新并不会触发导航守卫(push() 也不行),因为 VueRouter 不允许进入相同的路由,这是其内部机制,我们无法在外部干涉。

因此,只能在用户退出成功时,手动加入与导航守卫相同的判定逻辑,若在白名单之内或拥有相应的路由权限,则留在当前路由;若不符合条件,则重定向至登录页:

退出相关组件

import whiteList from '@/store/whiteList';
import routePaths from '@/store/routePaths';
 
...
handleLogoutRedirect() {
  let location = {};
  if (
    !whiteList.includes(this.routePath) &&
    !whiteList.includes(routePaths[this.routeName])
  ) {
    location = { name: 'Login', query: { redirect: this.routePath } }; // 注意这里,需要手动带上当前路径,否则重新登录后只能到首页
    this.$router.push(location);
  }
  // 当前路由在白名单之内的,不需要跳转,留在当前路由即可
},
handleLogout() {
  this.$store
    .dispatch('LOGOUT')
    .then(() => {
      this.handleLogoutRedirect();
    })
    .catch((err) => err);
},
...

注意,我在顶部导入了一个 routePaths 对象。由于搜索页等组件是带有 params 参数的,若想要判定当前路由是否属于白名单,需要使用路由配置对象中的完整 path 字符串,比如搜索页是 /search/:keyword?,那么白名单数组和 routePaths 对象里都需要使用这个字符串。此处为了匹配的方便,使用路由组件的 name 属性作为 routePaths 的 key。示例:

routePaths.js

// 其他路由若是 path 不带 params 参数的,可以不用配置,像上述代码那样分开判定即可
const routePaths = {
    Search: '/search/:keyword?',
}
export default routePaths;

进阶

在任意路由点击登录,将当前路由和路由参数都带给登录组件,登录成功后返回之前的路由并携带全部路由参数。

此处的导航守卫、以及带有登录链接或跳转至登录页功能的组件代码无需改动,只需要修改路由配置对象和登录组件。

首先,定义路由的配置对象时,将登录组件的路由 props 改为:

props: route => {
  let params = route.params, query = route.query; // 这里不能解构 route 对象,否则拿不到值
  const redirect = query.redirect;
  Reflect.deleteProperty(query, 'redirect'); // 原本的 query 对象不带 redirect 属性,因此需要删除
  return { redirect, params, query }
},

其次,登录成功时,给路由跳转添加 prams 和 query 参数

props: ['redirect', 'params', 'query'],
...
handleLogin() {
  this.$store
    .dispatch('LOGIN', { phone: this.phone, password: this.password })
    .then((data) => {
      this.$router.push(
        this.redirect
          ? { path: this.redirect, params: this.params, query: this.query }
          : { name: 'Home' }
      );
    })
    .catch((err) => {
      console.log('登录失败:', err);
    });
},

加载全部内容

相关教程
猜你喜欢
用户评论