vue怎样写登录鉴权

在 Vue 中实现登录鉴权需要用到路由守卫和 Vuex 状态管理。

下面是一个示例，演示了如何在 Vue 中实现基于 token 的登录鉴权：

首先在 Vuex 中定义一个状态来保存用户信息和登录状态：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
 state: {
   user: null,
   isLoggedIn: false,
 },
 mutations: {
   setUser(state, user) {
     state.user = user;
   },
   setIsLoggedIn(state, isLoggedIn) {
     state.isLoggedIn = isLoggedIn;
   },
 },
});

export default store; 

在登录成功后，将用户信息和 token 存储到 Vuex 中：

// Login.vue

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <input type="text" v-model="username" />
      <input type="password" v-model="password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({
          username: this.username,
          password: this.password,
        }),
      });
      const { user, token } = await response.json();
      this.setUser(user);
      this.setIsLoggedIn(true);
      localStorage.setItem('token', token);
      this.$router.push('/');
    },
    ...mapMutations(['setUser', 'setIsLoggedIn']),
  },
};
</script>

创建路由守卫来检查用户是否已经登录：

// router.js

import Vue from 'vue';
import Router from 'vue-router';
import store from './store';
import Home from './views/Home.vue';
import Login from './views/Login.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true,
      },
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
  ],
});

router.beforeEach((to, from, next) => {
  const isLoggedIn = store.state.isLoggedIn || localStorage.getItem('token');
  if (to.matched.some((record) => record.meta.requiresAuth) && !isLoggedIn) {
    next('/login');
  } else {
    next();
  }
});

export default router;

在组件中使用需要登录的路由：

// Home.vue

<template>
  <div>
    <h1>Home</h1>
    <p v-if="isLoggedIn">Welcome, {{ user.username }}!</p>
    <p v-else>You are not logged in.</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['user', 'isLoggedIn']),
  },
};
</script>

在上面的代码中，路由守卫会检查用户是否已经登录，如果用户没有登录且访问需要登录的路由，则会重定向。