How to perform permission control and login verification in Vue project

How to perform permission control and login verification in a Vue project requires specific code examples

In a Vue project, permission control and login verification are very important functions. Proper permission control and login verification can ensure that users can only access pages for which they have permission, and protect user data security. This article will introduce in detail how to implement permission control and login verification in the Vue project, and give specific code examples.

Step 1: Introduce routing and state management

First, we need to use the routing and state management provided by Vue to implement permission control and login verification. We can use Vue Router to manage page routing and Vuex to manage user status.

Introduce and configure Vue Router and Vuex in the project's entry file main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import routes from './router/index.js' // 引入路由配置文件
import store from './store/index.js' // 引入Vuex配置文件

Vue.use(VueRouter)
Vue.use(Vuex)

const router = new VueRouter({
  routes
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Create a # in the router folder ##index.js file, used to configure routing information:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Admin from '@/views/Admin.vue'
import Dashboard from '@/views/Dashboard.vue'
import Users from '@/views/Users.vue'
import NotFound from '@/views/NotFound.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/admin',
      name: 'admin',
      component: Admin,
      children: [
        {
          path: '',
          name: 'dashboard',
          component: Dashboard
        },
        {
          path: 'users',
          name: 'users',
          component: Users
        }
      ]
    },
    {
      path: '*',
      name: 'notfound',
      component: NotFound
    }
  ]
})

Create an

index.js file in the store folder, used to configure Vuex state management:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    isLoggedIn: false
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    SET_LOGGED_IN(state, value) {
      state.isLoggedIn = value
    }
  },
  actions: {
    login({ commit }, user) {
      // 在这里进行登录验证的逻辑
      // 成功后设置用户信息和登录状态
      commit('SET_USER', user)
      commit('SET_LOGGED_IN', true)
    },
    logout({ commit }) {
      // 退出登录，清除用户信息和登录状态
      commit('SET_USER', null)
      commit('SET_LOGGED_IN', false)
    }
  }
})

The second step: implement the login page

The next step is to implement the login page, where the user logs in. We can add a form in the

Login.vue component for users to enter their username and password and submit it.

<template>
  <div class="login">
    <form @submit.prevent="submit">
      <input type="text" v-model="username" placeholder="请输入用户名">
      <input type="password" v-model="password" placeholder="请输入密码">
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submit() {
      // 在这里调用登录接口进行验证
      // 异步返回结果后触发登录操作
      this.$store.dispatch('login', {
        username: this.username,
        password: this.password
      }).then(() => {
        // 登录成功后跳转到首页或其他页面
        this.$router.push('/')
      }).catch(() => {
        // 登录失败逻辑处理
      })
    }
  }
}
</script>

Step 3: Implement login verification and permission control

Next, we need to perform corresponding logic processing in the pages that require login verification and permission control. For example, in the

Admin.vue component, we can perform login verification and permission control logic in the created hook function.

<template>
  <div class="admin">
    <h1>管理员页面</h1>
    <!-- 其他内容... -->
  </div>
</template>

<script>
export default {
  created() {
    if (!this.$store.state.isLoggedIn) {
      // 未登录状态，跳转到登录页面
      this.$router.push('/login')
    } else {
      // 已登录状态，进行权限控制
      if (!this.$store.state.user.isAdmin) {
        // 非管理员用户，无权限访问
        this.$router.push('/404')
      }
    }
  }
}
</script>

In this example, we determine the user's login status and permissions in the

created hook function, and perform corresponding jump operations based on the judgment results.

This is an example of implementing permission control and login verification in a basic Vue project. By properly configuring routing and status management, and writing corresponding logic processing, we can implement user login verification and permission control functions. Of course, in actual projects, more detailed processing needs to be carried out according to specific requirements, such as adding routing guards, interaction of front-end and back-end interfaces, etc. I hope the examples in this article can help readers better understand and apply permission control and login verification.

The above is the detailed content of How to perform permission control and login verification in Vue project. For more information, please follow other related articles on the PHP Chinese website!