一、前序工作

官网安装步骤
引用官网

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

二、Token

先要编辑好Token令牌;我是用php写的

//生成token令牌
 public static function generateToken(){
        //32个字符组成的随机字符串
        $randChars = getRandChar(32);
        //时间戳
        $timestamp = $_SERVER['REQUEST_TIME_FLOAT'];
        //salt 盐-->这个自己所以写;
        $salt =config('secure.token_salt');
        //用三个字符串,进行md5加密
        return md5($randChars.$timestamp.$salt);
    }

//获取当前存储的token令牌
 public static function getCurrentTokenVar($key){
     $token =Request::instance()
         ->header('token');
     $vars =Cache::get($token);
     if(!$vars){
         throw new TokenException();
     }else{
         if(!is_array($vars)){
             $vars=json_decode($vars,true);
         }
         if(array_key_exists($key,$vars)){
             return $vars[$key];
         }else{
             throw new Exception('尝试获取的Token变量不存在');
         }
     }
 }

三、设置base url

注意文件路径:src/utils/request.js

把baseURL改成自己server端的路由
在这里插入图片描述

四、登陆

简单的说一下,整个登陆的流程:点击登陆按钮,调用方法向服务端发送post请求;账号密码通过之后,服务端会返回一个 token(该token的是一个能唯一标示用户身份的一个key),之后我们将token存储在本地cookie之中

接下来的内容目录有点复杂多变;请仔细看,不要找错了

先找到登陆的页面 src/views/login/index.vue

1.我们先来找到登陆的按钮

然后我们可以看到,它触发了handleLogin();让我们继续往下看
在这里插入图片描述

2.找到对应的方法

找到后,我们可以发现它又指向其他地方;让我们继续找一下
在这里插入图片描述

4.找到它 $store下面的user里的login

注意文件路径:src/store/index.js
在这里插入图片描述

注意文件路径:src/store/modules/user.js

为什么会有两个login,
第一个login是$store中的方法,第二个login方法是,api里的login方法,用来调用接口的,
让我们找一下api里面的login

在这里插入图片描述

5.找到api里面的login

注意文件路径:src/api/user.js
这个request是大佬封装的axios,进去看看
在这里插入图片描述

6.找到request

注意文件路径:src/utils/request.js
在这里插入图片描述
在这里插入图片描述
找到这里;整个login,才算看得七七八八了,接下来就是要修改一下接口了

7.修改接口

注意文件路径:src/api/user.js
在这里插入图片描述

8.登陆成功截图

页面顺利跳转,并且 token 也被存储起来了
在这里插入图片描述

五、遇到的各种问题

1.跨域问题

关于跨域网上有好多解决方法;我这里用了最简单的方法

  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Headers: x-token,Content-Type, Content-Length, Authorization, Accept, X-Requested-With, Current-Page');
  header('Access-Control-Allow-Methods: POST,GET,OPTIONS,DELETE');
2.Request header field x-token is not allowed by Access-Control-Allow-Headers in preflight response.

这是一个比较…的问题;一开始没有注意到他的请求头时X-Token,日常的写了token;于是报错 x-token请求头不通过,啊哈哈哈;如果报这个错,要么是写错了,要么是没写;记得修改或者补上

3.已经可以获得token,但是就是弹出error错误

在这里插入图片描述
这又是一个坑;唉,这个坑是来源与 src/utils/request.js
不知道是框架版本的问题还是什么问题;我这里他要的是20000,然后我写的是200,大家注意一下,引以为戒
如果大家没写code,也是不给过的,返回一个error

在这里插入图片描述
所以如果执行成功了,服务端记得要返回一个code:20000
在这里插入图片描述

4.如果已经获取到token,并且成功执行了Login;还是报错,且页面不会跳转

方法路径:
src/api/user.js,简称user1、
src/store/modules/user.js 简称user2

这个时候有可能是你的 getInfo 执行失败;你可以把user2里的 getInfo() 给注释了测试一下

user1的 getInfo() 它默认是用get请求,因为个人需求,所以改成了post;服务端如果执行成功记得也要返回一个code 20000
在这里插入图片描述
踩呀踩,菜鸡的我,由踩了半天的坑,唉

本文是个人的探索过程;如果有什么错误,希望大家能够及时指出,我会立刻更正。

本文参考了大佬的文档
手摸手,带你用vue撸后台 系列二(登录权限篇)
官网:vue-element-admin

Logo

前往低代码交流专区

更多推荐