项目登录页面注意事项和实现 (Vue)

1 创建登录页面并配置路由

1.1 创建组件

在src/views文件中创建login文件夹，在login文件夹中创建login.vue ( 可以按照自己的需求创建目录 )

1.2 配置路由

打开route文件夹中的index.js文件并添加新路由 ( 路由中的地址按照当前自己创建的目录地址来配置 )

{
  path:'/login',
  name:'login',
  components:()=>import(/* webpackChunkName:"login" */ '@/views/login/login.vue)
}

在App.vue中配置路由容器

<template>
  <div id="app">
    <!-- 路由出口 -->
    <router-view></router-view> // 项目初始化一般会带有
  </div>
</template>

2 样式处理和表单验证

2.1 样式处理

全局导入

在src目录下创建一个styles文件，并在main.js中导入

+ import '@/styles/index.less'

局部修改

scoped防止对全局样式造成污染

2.2 表单验证

不要忘记在提交用户账号密码的时候进行表单验证
使用双向绑定获取用户输入的信息，使用正则表达式对获取的信息进行筛选验证

3 axios封装获取数据

3.0 安装axios

npm i axios

3.1 封装并导入

在src目录下创建文件request.js，在该文件下封装axios

import axios from 'axios' // 引入
// 创建axios实例，配置
const request = axios.create({ //request名可以自定义
  baseURL:'后端接口基地址'
  // For example:baseURL:'http://localhost:8000'
})
export default request // 导出

哪里需要哪里调用

4 发送ajax请求登录

封装用户登录方法，然后在logn.vue中调用

4.1 封装 (举例)

新建了一个调用文件login.js

import request from '@/utils/request.js' // 引入上面封装的axios
export const login = (user) => {
  return request({
    url:'' // 接口地址
    method:'' //方式
    // 如果参数通过请求体来发 (POST) 用 => data
    // 如果参数通过请求体来发 (GET) 用 => params
    data:user
  })
}

4.2 调用

在login.vue中调用

import {login} from '@/api/login/login.js'  // 引入
export default {
  methods:{
    onSubmit () {
      this.doLogin() // 在提交用户账号密码的时候调用doLogin
    },
    async doLogin () {
      try{
        const res = await login (this.user)  // 调用封装的axios方法
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    }
  }
}

4.3 检查

在控制台的network中查看效果，看请求是否发送成功

5 token处理

5.1 token作用和使用流程

token的作用：
是一个令牌，是后端生成的，用来请求需要权限的接口时使用的，如果不带token会导致错误

2. 基本使用流程
(1) 用户登录，获取token
(2) 保存token到本地
(3) 发起其他请求时携带token

5.2 举例：获取用户信息 (需要携带token才能获取，不然会报错)

5.2.1 添加方法调用接口

创建user.js

import request from '@/utils/request.js'

export const getUserInfo = () => {
  return request({
    method: '', // 方式
    url: '' //接口地址
  })
}

5.2.2 把token保存在Vuex中

获取token (上面登录举例时封装了axios，和上面的登录结合进行修改) ，在store/index.js文件中获取token并保存

import { login } from '../api/login/login'
export default new Vuex.Store({
  state: {
    tokenInfo: {} // 用来保存token
  },
  mutations: {
    setTokenInfo (state, newTokenInfo) {
      state.tokenInfo = newTokenInfo // 修改state中的token值,保存到state中的tokenInfo中
    }
  },
  actions: {
    async userLogin (context, userinfo) {  // 获取token
      try {
        const res = await login(userinfo)
        console.log(res)
        // res,data.data是找到获取的res数据中的token，每个接口调用的数据不一样，可以先使用console.log输出找到想要的数据
        context.commit('setTokenInfo', res.data.data)  // 调用mutations中的方法setTokenInfo
      } catch (err) {
        throw new Error(err)
      }
    }
  }
})

修改登录时login.vue中的文件，只需要调用Vuex中的actions中的方法就行

export default {
  methods:{
    onSubmit () {
      this.doLogin()
    },
    async doLogin () {
      try{
        await this.$store.dispatch('userLogin', this.user)
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    }
  }
}

最后查看有没有获取到tokenInfo，点击登录后，在控制台中查看

5.2.3 在请求拦截器中添加token

请求拦截器：所有的axios请求都会经过请求拦截器

在utils/request,js中添加拦截器

request.interceptors.request.use(function (config) {
  const token = store.state.tokenInfo.token // tokenInfo中获取到的是一个数组，需要注意，如果输入数组会报错，所以需要取出token
  if (token) { // 验证是否存在token，如果存在，将token加入headers中
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

5.2.4 保存用户信息到vuex

由于用户信息需要在不同组件中使用，所以保存在store仓库中，如果怕代码太多，就单独拆分模块来写，在store中建立modules文件夹，然后创建user.js文件,写法与store一模一样

在user.js中调用5.2.1中设置好的getUserInfo接口方法获取用户信息

import { getUserInfo } from '../../api/user'

export default {
  namespaced: true,
  state: {
    userInfo: {} // 获取用户数据
  },
  mutations: {
    setUserInofo (state, userInfo) { // 获取到最新用户数据后更改state中的数据
      state.userInfo = userInfo
    }
  },
  actions: {
    async getUserInfo (context) {
      try {
        const res = await getUserInfo()
        console.log(res)
        // res,data.data是找到获取的res数据中的token，每个接口调用的数据不一样，可以先使用console.log输出找到想要的数据
        context.commit('setUserInofo', res.data.data)
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}

在store/index.js中添加modules然后调用user.js

import user from './modules/user'
modules: {
    user
  }

最后在login.vue中调用action就行 (注意实在拆分模块写的所以要写上模块名) 上面的获取token是在store/index.js中的actions中直接写的，所以调用的时候不需要写模块名

5.2.5 验证是否保存了token和用户数据是否拿到

token

用户信息