vue3-简单登录认证前端实现样例

登录页面

登录页面需要与业务功能页面独立开，请参考《多级路由》一文。

登录框

一个简单的登录页面代码如下所示，需包含用户名、密码的输入框，登录按钮等基础组件，可根据需要进行美化。

<template>
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 500px">
        <div class="clearfix" style="text-align:center">
          <h2>用户登录</h2>
        </div>
        <table style="margin-top:40px;width:100%">
          <tr>
            <td>用户</td>
            <td>
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
                <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter="doLogin"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <el-button style="width: 50%;margin-left:25%;margin-top:20px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
</template>

登录函数

在data()中定义变量user

data() {
  return { 
    user: {
      username:'',
      password:''
    }
  }
}

在method中定义登录函数

doLogin() { //点击登录按钮
    if (this.user.username === '' || this.user.password === '') {
        ElMessage({ message: "账号或密码不能为空", type: 'error' });
    } else {
        axios.post('/api/login/validate', this.user)
            .then((res) => {
                if (res.data.errcode === 0) {
                    if (res.data.data.result === 1){
                        ElMessage({ message: "登录成功："+res.data.data.msg, type: 'success' });
                        this.userToken = res.data.data.token;
                        // 将用户token保存到vuex中
                        store.commit('setUserToken',{ XXXToken: this.userToken, XXXUser: this.user.username });
                        router.push({name:'Home'}); //页面跳转
                    } else {
                        ElMessage({ message: res.data.data.msg, type: 'error' });
                    }
                } else {
                    ElMessage({ message: res.data.errmsg, type: res.data.errtype });
                }
            })
            .catch((error) => { // 请求失败处理
                ElMessage({ message: error, type: 'error' });
            });
    }
}

router

在router/index.js中设置前置路由守卫，判断用户是否登录。项目名称处以XXX代替。

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
      next();
  } else {
      let token = localStorage.getItem('XXXToken');
  
      if (token === null || token === '') {
          next('/login');
      } else {
          next();
      }
  }
});

vuex

在store/index.js中设置token的变量和存取函数

import { createStore } from 'vuex'

const store = createStore({
    state: {
        // 存储token
        XXXToken: localStorage.getItem('XXXToken') ? localStorage.getItem('XXXToken') : '',
        XXXUser: localStorage.getItem('XXXUser') ? localStorage.getItem('XXXpUser') : ''
    },
    mutations: {
        // 修改token，并将token存入localStorage
        setUserToken(state, user) {
            state.XXXToken = user.XXXToken;
            state.XXXUser = user.XXXUser;
            localStorage.setItem('XXXToken', user.XXXUser);
            localStorage.setItem('XXXUser', user.XXXUser);
        },
        removeUserToken(state) {
            state.XXXToken = '';
            state.XXXUser = '';
            localStorage.removeItem('XXXToken');
            localStorage.removeItem('XXXUser');
        }
    },
    actions: {
    },
    modules: {
    }
})

export default store;

登出

在基本功能页面的右上角或其他位置，可设置登出按钮，其响应函数可为：

userLogout(){
   store.commit("removeUserToken");
   router.push({name:'Login'}); //页面跳转
}

Todo

以上样例仅提供了基本的登录功能，前端仅判断在浏览器中是否存在token，如果没有token再跳转至登录页面。如果需要设置token的后台验证、超时等，可再此基础上进行扩展。