vue-admin-template token 登陆

一、前序工作

官网安装步骤
引用官网

# 克隆项目
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