在 GitHub 上有很多写好的模板, 这个项目也是基于模板做的
现在记录一下我做的过程
1 修改 config 文件夹里的 dev.env.js 里的 BASE_API, 把地址改成请求后端的公共部分
BASE_API: '"http://192.168.xx.xx"',
2 接下来就是操作 src 文件, 先在 views 里写好 vew 组件 (login.vue,regist.vue), 写好到 router 里的 index.js 里配置好路径
- login.vue
- <template>
- <div class="login-container">
- <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
- label-width="0px"
- class="card-box login-form">
- <h3 class="title"> 登录 </h3>
- <el-form-item prop="name">
- <span class="svg-container svg-container_login">
- <svg-icon icon-class="user"/>
- </span>
- <el-input name="name" disabled type="text" v-model="loginForm.name" autoComplete="on"
- placeholder="用户名"/>
- </el-form-item>
- <el-form-item prop="password">
- <span class="svg-container">
- <svg-icon icon-class="password"></svg-icon>
- </span>
- <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
- autoComplete="on"
- placeholder="密码"></el-input>
- <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye"/></span>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
登录
- </el-button>
- </el-form-item>
- </el-form>
- </div>
- </template>
- <script>
- export default {
- name: 'login',
- data() {
- const validateUsername = (rule, value, callback) => {
- if (value.trim().length<1) {
- callback(new Error('用户名不能为空'))
- } else {
- callback()
- }
- };
- const validatePass = (rule, value, callback) => {
- if (value.trim().length < 1) {
- callback(new Error('密码不能为空'))
- } else {
- callback()
- }
- };
- return {
- loginForm: {
- name: '',
- password: ''
- },
- loginRules: {
- name: [{required: true, trigger: 'blur', validator: validateUsername}],
- password: [{required: true, trigger: 'blur', validator: validatePass}]
- },
- loading: false,
- pwdType: 'password'
- }
- },
- methods: {
- showPwd() {
- if (this.pwdType === 'password') {
- this.pwdType = ''
- } else {
- this.pwdType = 'password'
- }
- },
- handleLogin() {
- this.$refs.loginForm.validate(valid => {
- if (valid) {
- this.loading = true;
- this.$store.dispatch('Login', this.loginForm).then(() => {
- this.loading = false;
- this.$router.push({path: '/'});
- }).catch((e) => {
- this.loading = false
- })
- } else {
- console.log('error submit!!')
- return false
- }
- })
- }
- }
- }
- </script>
- router/index.js
- { path: '/login', component: _import('Login/login'), hidden: true }
3 在 api 里的 login.js 里写好与后端对接的接口地址, 在 stores 里的 modules 里的 user.js 里定义 user, 有 state,mutations,action, 具体的请求操作写在 action 里, login.vue 或 regist.vue 调用 user.js 里写好的请求, getter.js 里定义 store 的 getters
- api/login.js
- import request from '@/utils/request'
- export function login(name,password) {
- return request({
- url: '/XX/XX',
- method: 'post',
- data: {
- name,
- password
- }
- })
- }
- stores/modules/user.js
- import { login,regist,logout } from '@/api/login'
- import { getToken,setToken } from '@/utils/auth'
- const user = {
- state: {
- name:'',
- token:''
- },
- mutations: {
- SET_NAME: (state, name) => {
- state.name = name;
- },
- SET_TOKEN: (state, token) => {
- state.token = token;
- setToken(token);
- }
- },
- actions: {
- // 登录
- Login({ commit }, userInfo) {
- const name = userInfo.name.trim();
- const password = userInfo.password.trim();
- return new Promise((resolve, reject) => {
- login(name, password).then(response => {
- const data = response.data;
- commit('SET_NAME', data.name);
- commit('SET_TOKEN', data.token);
- setName(data.name);
- setToken(data.token);
- resolve(response); }).catch(error => { reject(error) }) }) },
- // 注册
- Regist({ commit }, userInfo) {
- const name= userInfo.name.trim();
- const password = userInfo.password.trim();
- return new Promise((resolve, reject) => {
- regist(name, password).then(response => {
- const data = response.data;
- commit('SET_NAME', data.name);
- commit('SET_TOKEN', data.token);
- setName(data.name);setToken(data.token);
- resolve(response);
- }).catch(error => {
- reject(error) }) }) },
- // 登出
- LogOut({ commit, state }) {
- return new Promise((resolve, reject) => {
- logout().then(response => {
- commit('SET_NAME', '');
- commit('SET_TOKEN', '');
- setName('');
- setToken(false);
- //removeName();
- //removeToken();
- resolve(response);
- }).catch(error => {
- reject(error)
- })
- })
- },
- // 前端 登出
- FedLogOut({ commit }) {
- return new Promise(resolve => {
- setToken(false);
- commit('SET_TOKEN', false);
- resolve()
- })
- }
- }
- }
- export default user
- getter.js:
- const getters={
- name:state=>state.user.name,
- token:state=>state.user.token
- }
- export default getter
4 在 utils 里的 auth.js 里对 cookies 进行操作, 写入, 读取, 删除用户权限, 是否登录的标志等
- import Cookies from 'js-cookies'
- export function setName(name) {
- return Cookies.set("name", name);
- }
- export function getName() {
- return Cookies.get("name");
- }
- export function setToken(token) {
- return Cookies.set("token", token);
- }
- export function getToken() {
- return Cookies.get("token");
- }
5 在 permission.js 里写白名单, 对白名单以外的跳转进行拦截然后跳转登录, 同时判断用户权限, 是否登录, 等
- import router from './router'
- import store from './store'
- import NProgress from 'nprogress' // Progress 进度条
- import 'nprogress/nprogress.CSS'// Progress 进度条样式
- import {Message} from 'element-ui'
- import {getName, getToken} from "@/utils/auth"; // 验权
- const whiteList = ['/login', '/regist']; // 不重定向白名单
- router.beforeEach((to, from, next) => {
- NProgress.start();
- if (whiteList.indexOf(to.path) !== -1) {
- next();
- } else {
- if (getToken()==="true") {
- next();
- NProgress.done()
- } else {
- next({path: '/login'});
- NProgress.done()
- }
- }
- })
- router.afterEach(() => {
- NProgress.done() // 结束 Progress
- })
6utils 里的 request.js 里写拦截码, 对后端返回的特定码进行拦截然后做相应的操作
- import axios from 'axios'import {
- Message,
- MessageBox
- }
- from 'element-ui'import store from '../store'
- // 创建 axios 实例
- const service = axios.create({
- baseURL: process.env.BASE_API,
- // api 的 base_url
- timeout: 15000 // 请求超时时间
- });
- // respone 拦截器
- service.interceptors.response.use(response = >{
- /**
- * code 为非 200 是抛错 可结合自己业务进行修改
- */
- const res = response.data;
- //const res = response;
- if (res.code !== '200' && res.code !== 200) {
- if (res.code === '4001' || res.code === 4001) {
- MessageBox.confirm('用户名或密码错误, 请重新登录', '重新登录', {
- confirmButtonText: '重新登录',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() = >{
- store.dispatch('FedLogOut').then(() = >{
- location.reload() // 为了重新实例化 vue-router 对象 避免 bug
- })
- })
- }
- if (res.code === '4009' || res.code === 4009) {
- MessageBox.confirm('该用户名已存在, 请重新注册!', '重新注册', {
- confirmButtonText: '重新注册',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() = >{
- store.dispatch('FedLogOut').then(() = >{
- location.reload() // 为了重新实例化 vue-router 对象 避免 bug
- })
- })
- }
- return Promise.reject('error')
- } else {
- return response.data
- }
- },
- error = >{
- Message({
- message: error.message,
- type: 'error',
- duration: 5 * 1000
- });
- return Promise.reject(error)
- }) export
- default service
以上就是登录注册的核心部分, 写的不对的地方请指教
来源: http://www.jb51.net/article/136114.htm