导航守卫判断个人中心页面是否登录

在上一节中，用户即使没有登录，也是可以访问。如下图所示。

显示这是不允许的。实际开发网站或应用程序时，经常需要对某些页面进行权限控制，只有用户登录后才能访问。例如，这里的个人中心，修改密码，以及后面的支付，订单等很多页面都需要权限验证。

如果每个页面都写一遍验证，那么会非常繁琐，那么是否有一种简单的方式，在url页面中简单配置一个参数，如果这个有这个参数，说明这个页面需要验证，否则就不需要验证呢？

答案是肯定的，在Vue.js中，可以使用导航守卫来实现这个功能。

1. 了解导航守卫

导航守卫是Vue Router提供的一种机制，用于在路由跳转前进行全局的前置验证或操作。通过配置导航守卫，可以对要访问的路由进行判断，如果需要登录才能访问，就进行登录状态的验证，未登录则跳转到登录页面。

Vue Router提供了以下导航守卫：

• beforeEach: 全局前置守卫，在路由跳转之前执行。
• beforeResolve: 全局解析守卫，在路由跳转前解析异步组件。
• afterEach: 全局后置守卫，在路由跳转之后执行。

2. 使用导航守卫判断登录状态

在Vue项目中，可以在路由配置文件（通常命名为router/index.js）中使用导航守卫来判断用户的登录状态。

首先，在index.js文件中引入Vue Router：

frontend/src/router/index.js

import store from '../store';

// 从本地存储中获取 token
const token = localStorage.getItem('token')

// 如果存在 token,说明用户已登录,提交 mutation 设置登录状态
if (token) {
 store.commit('setLoginStatus', true) 
}

// 路由导航守卫
router.beforeEach((to, from, next)=> {
//如果访问的页面需要登录,且未登录,跳转登录页
if (to.matched.some(record => record.meta.requireLogin) && !store.state.isLogin) {
   next({name: 'Login', query:{jump: to.path}})
 
 // 其他情况直接 next
 } else {
   next()
 }
})

代码解析

这个路由导航守卫的主要逻辑是:

1. 检查本地存储是否有 token,有的话设置登录状态

2. 对访问的路由进行判断

• 如果已登录访问登录/注册页,跳转主页
• 如果访问需要登录的页面而未登录,跳转登录页
• 其他情况直接放行

这样可以实现一个基本的登录验证逻辑,防止未登录用户访问需要登录的页面。

使用了上面的导航卫士，如果哪个页面需要登录，我们只需要在路由中设置参数“meta.requireLogin”即可，例如：

frontend/src/router/index.js

  {
    path: "/personal",
    name: "Personal",
    component: Personal,
    meta: {
      requireLogin: true
    }
  },
  {
    path: "/change_password",
    name: "ChangePassword",
    component: ChangePassword,
    meta: {
      requireLogin: true
    }
  },

设置完成后如果未登录访问修改密码页面，则自动跳转到登录页。

3. 在登录页面处理跳转后的页面

在登录页面登录成功后，可以通过URL参数获取到之前要跳转的页面路径，并进行跳转。修改Login.vue，代码如下：

frontend/src/views/Login.vue

  methods: {
    submitForm(){
        const username = this.username;
        const password = this.password;
        if (username === '') {
            showMessage('用户名不能为空')
            return
        }
        if (password === '') {
            showMessage('密码不能为空')
            return
        }
        const formData = {
            username: username,
            password: password,
        }
        axios
            .post('/api/jwt/create/', formData)
            .then(response => {
                const token = response.data.access;
                const refreshToken = response.data.refresh;
                const username = this.username;
                localStorage.setItem("token", token)
                localStorage.setItem("refreshToken", refreshToken)
                localStorage.setItem("username", username)
                localStorage.setItem("expiredTime", Date.now() + 5 * 60 * 1000 )
                // 新增代码
                this.$store.commit('setLoginStatus', true)
                const redirectAfterLogin = this.$route.query.jump
                const redirectUrl = redirectAfterLogin ? redirectAfterLogin : '/'
                showMessage('登录成功','info',()=>{
                    this.$router.push({
                        path: redirectUrl
                    })
                })
            })
            .catch(error => {
                console.log(error);
                const errorData = error.response.data;
                const errorMessage = Object.values(errorData).flat();
                for (let i = 0; i < errorMessage.length; i++) {
                    showMessage(errorMessage[i]);
                }
            })
    }

上述代码中，通过this.$route.query.jump获取到登录页面URL中的jump参数，如果存在，则跳转到该路径；如果不存在，则跳转到首页。

运行效果如下图所示。

通过上述步骤，在需要登录访问的页面中添加meta属性requireLogin: true，并使用导航守卫判断登录状态，即可实现登录判断的功能。这样，当用户未登录时访问该页面会被重定向到登录页面，登录成功后再跳回原始的页面。