首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue中的使用token的方法示例

Posted in Javascript onMarch 10, 2020

初始于登录页面

Home.vue

<template>
 <div class="home">
 </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios';

export default {
 name: 'home',
 components: {
  HelloWorld
 },
 created(){
  axios.get('/api/userinfo').then(res=>console.log(res.data))
 }
}
</script>

About.vue

<template>
 <div class="about">
  <h1>This is an about page</h1>
 </div>
</template>

login.vue

<template>
 <div>
  <div class="logo">
   <img src="https://img.kaikeba.com/logo-new.png" alt>
  </div>
  <!-- <cube-button>登录</cube-button> -->
  <cube-form
   :model="model"
   :schema="schema"
   @submit.prevent="handleLogin"
   @validate="handleValidate"
  ></cube-form>
 </div>
</template>

<script>
export default {
 data() {
  return {
   model: {
    username: "",
    password: ""
   },
   schema: {
    fields: [
     {
      type: "input",
      modelKey: "username",
      label: "用户名",
      props: { placeholder: "请输入用户名" },
      rules: {
       required: true
      },
      trigger: "blur"
     },
     {
      type: "input",
      modelKey: "password",
      label: "密码",
      props: {
       placeholder: "请输入密码",
       type: "password",
       eye: { open: true }
      },
      rules: {
       required: true
      },
      trigger: "blur"
     },
     {
      type: "submit",
      label: "登录"
     }
    ]
   }
  };
 },
 methods: {
  handleValidate(ret) {
   console.log(ret);
  },
  handleLogin(e) {
   // 登录请求
   this.$store.dispatch("login", this.model).then(success => {
     if (success) {
       const path = this.$route.query.redirect || '/'
       this.$router.push(path)
     }
   }).catch(error => {
     const toast = this.$createToast({
       time:2000,
       txt:'登录失败',
       type:'error'
     }).show();
   });
  }
 }
};
</script>

<style scoped>
</style>

/service/user

import axios from "axios";

export default {
 login(user) {
  return axios.get("/api/login", { params: user })
   .then(({ data }) => data);
 }
};

App.vue

<template>
 <div id="app">
  <div id="nav">
   <router-link to="/">Home</router-link> |
   <router-link to="/about">About</router-link>
   <button v-if="$store.state.user.isLogin" @click="logout">注销</button>
  </div>
  <router-view/>
 </div>
</template>

<script>
export default {
 methods: {
  logout() {
   this.$store.dispatch('logout')
  }
 },
}
</script>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
</style>

cube-ui组件的引用 cube-ui.js

import Vue from 'vue'

// By default we import all the components.
// Only reserve the components on demand and remove the rest.
// Style is always required.
import {
 /* eslint-disable no-unused-vars */
 Style,
 // basic
 Button,
 Loading,
 Tip,
 Toolbar,
 TabBar,
 TabPanels,
 // form
 Checkbox,
 CheckboxGroup,
 Checker,
 Radio,
 RadioGroup,
 Input,
 Textarea,
 Select,
 Switch,
 Rate,
 Validator,
 Upload,
 Form,
 // popup
 Popup,
 Toast,
 Picker,
 CascadePicker,
 DatePicker,
 TimePicker,
 SegmentPicker,
 Dialog,
 ActionSheet,
 Drawer,
 ImagePreview,
 // scroll
 Scroll,
 Slide,
 IndexList,
 Swipe,
 Sticky,
 ScrollNav,
 ScrollNavBar
} from 'cube-ui'

Vue.use(Button)
Vue.use(Loading)
Vue.use(Tip)
Vue.use(Toolbar)
Vue.use(TabBar)
Vue.use(TabPanels)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Checker)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Input)
Vue.use(Textarea)
Vue.use(Select)
Vue.use(Switch)
Vue.use(Rate)
Vue.use(Validator)
Vue.use(Upload)
Vue.use(Form)
Vue.use(Popup)
Vue.use(Toast)
Vue.use(Picker)
Vue.use(CascadePicker)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(SegmentPicker)
Vue.use(Dialog)
Vue.use(ActionSheet)
Vue.use(Drawer)
Vue.use(ImagePreview)
Vue.use(Scroll)
Vue.use(Slide)
Vue.use(IndexList)
Vue.use(Swipe)
Vue.use(Sticky)
Vue.use(ScrollNav)
Vue.use(ScrollNavBar)

cube-ui的样式 theme.styl

@require "~cube-ui/src/common/stylus/var/color.styl"


// action-sheet
$action-sheet-color := $color-grey
$action-sheet-active-color := $color-orange
$action-sheet-bgc := $color-white
$action-sheet-active-bgc := $color-light-grey-opacity
$action-sheet-title-color := $color-dark-grey
$action-sheet-space-bgc := $color-mask-bg
/// picker style
$action-sheet-picker-cancel-color := $color-light-grey
$action-sheet-picker-cancel-active-color := $color-light-grey-s

// bubble

// button
$btn-color := $color-white
$btn-bgc := $color-regular-blue
$btn-bdc := $color-regular-blue
$btn-active-bgc := $color-blue
$btn-active-bdc := $color-blue
$btn-disabled-color := $color-white
$btn-disabled-bgc := $color-light-grey-s
$btn-disabled-bdc := $color-light-grey-s
/// primary
$btn-primary-color := $color-white
$btn-primary-bgc := $color-orange
$btn-primary-bdc := $color-orange
$btn-primary-active-bgc := $color-dark-orange
$btn-primary-active-bdc := $color-dark-orange
/// light
$btn-light-color := $color-grey
$btn-light-bgc := $color-light-grey-sss
$btn-light-bdc := $color-light-grey-sss
$btn-light-active-bgc := $color-active-grey
$btn-light-active-bdc := $color-active-grey
/// outline
$btn-outline-color := $color-grey
$btn-outline-bgc := transparent
$btn-outline-bdc := $color-grey
$btn-outline-active-bgc := $color-grey-opacity
$btn-outline-active-bdc := $color-grey
/// outline-primary
$btn-outline-primary-color := $color-orange
$btn-outline-primary-bgc := transparent
$btn-outline-primary-bdc := $color-orange
$btn-outline-primary-active-bgc := $color-orange-opacity
$btn-outline-primary-active-bdc := $color-dark-orange

// toolbar
$toolbar-bgc := $color-light-grey-sss
$toolbar-active-bgc := $color-active-grey

// checkbox
$checkbox-color := $color-grey
$checkbox-icon-color := $color-light-grey-s
/// checked
$checkbox-checked-icon-color := $color-orange
$checkbox-checked-icon-bgc := $color-white
/// disabled
$checkbox-disabled-icon-color := $color-light-grey-ss
$checkbox-disabled-icon-bgc := $color-light-grey-ss
// checkbox hollow
$checkbox-hollow-checked-icon-color := $color-orange
$checkbox-hollow-disabled-icon-color := $color-light-grey-ss
// checkbox-group
$checkbox-group-bgc := $color-white
$checkbox-group-horizontal-bdc := $color-light-grey-s

// radio
$radio-group-bgc := $color-white
$radio-group-horizontal-bdc := $color-light-grey-s
$radio-color := $color-grey
$radio-icon-color := $color-light-grey-s
/// selected
$radio-selected-icon-color := $color-white
$radio-selected-icon-bgc := $color-orange
/// disabled
$radio-disabled-icon-bgc := $color-light-grey-ss
// radio hollow
$radio-hollow-selected-icon-color := $color-orange
$radio-hollow-disabled-icon-color := $color-light-grey-ss

// dialog
$dialog-color := $color-grey
$dialog-bgc := $color-white
$dialog-icon-color := $color-regular-blue
$dialog-icon-bgc := $color-background
$dialog-title-color := $color-dark-grey
$dialog-close-color := $color-light-grey
$dialog-btn-color := $color-light-grey
$dialog-btn-bgc := $color-white
$dialog-btn-active-bgc := $color-light-grey-opacity
$dialog-btn-highlight-color := $color-orange
$dialog-btn-highlight-active-bgc := $color-light-orange-opacity
$dialog-btn-disabled-color := $color-light-grey
$dialog-btn-disabled-active-bgc := transparent
$dialog-btns-split-color := $color-row-line

// index-list
$index-list-bgc := $color-white
$index-list-title-color := $color-dark-grey
$index-list-anchor-color := $color-light-grey
$index-list-anchor-bgc := #f7f7f7
$index-list-item-color := $color-dark-grey
$index-list-item-active-bgc := $color-light-grey-opacity
$index-list-nav-color := $color-grey
$index-list-nav-active-color := $color-orange

// loading

// picker
$picker-bgc := $color-white
$picker-title-color := $color-dark-grey
$picker-subtitle-color := $color-light-grey
$picker-confirm-btn-color := $color-orange
$picker-confirm-btn-active-color := $color-light-orange
$picker-cancel-btn-color := $color-light-grey
$picker-cancel-btn-active-color := $color-light-grey-s
$picker-item-color := $color-dark-grey

// popup
$popup-mask-bgc := rgb(37, 38, 45)
$popup-mask-opacity := .4

//scroll

// slide
$slide-dot-bgc := $color-light-grey-s
$slide-dot-active-bgc := $color-orange

// time-picker

// tip
$tip-color := $color-white
$tip-bgc := $color-dark-grey-opacity

// toast
$toast-color := $color-light-grey-s
$toast-bgc := rgba(37, 38, 45, 0.9)

// upload
$upload-btn-color := $color-grey
$upload-btn-bgc := $color-white
$upload-btn-active-bgc := $color-light-grey-opacity
$upload-btn-box-shadow := 0 0 6px 2px $color-grey-opacity
$upload-btn-border-color := #e5e5e5
$upload-file-bgc := $color-white
$upload-file-remove-color := rgba(0, 0, 0, .8)
$upload-file-remove-bgc := $color-white
$upload-file-state-bgc := $color-mask-bg
$upload-file-success-color := $color-orange
$upload-file-error-color := #f43530
$upload-file-status-bgc := $color-white
$upload-file-progress-color := $color-white

// switch
$switch-on-bgc := $color-orange
$switch-off-bgc := $color-white
$switch-off-border-color := #e4e4e4

// input
$input-color := $color-grey
$input-bgc := $color-white
$input-border-color := $color-row-line
$input-focus-border-color := $color-orange
$input-placeholder-color := $color-light-grey-s
$input-clear-icon-color := $color-light-grey

//textarea
$textarea-color := $color-grey
$textarea-bgc := $color-white
$textarea-border-color := $color-row-line
$textarea-focus-border-color := $color-orange
$textarea-outline-color := $color-orange
$textarea-placeholder-color := $color-light-grey-s
$textarea-indicator-color := $color-light-grey-s

// validator
$validator-msg-def-color := #e64340

// select
$select-color := $color-grey
$select-bgc := $color-white
$select-disabled-color := #b8b8b8
$select-disabled-bgc := $color-light-grey-opacity
$select-border-color := $color-light-grey-s
$select-border-active-color := $color-orange
$select-icon-color := $color-light-grey
$select-placeholder-color := $color-light-grey-s

// swipe
$swipe-btn-color := $color-white

// form
$form-color := $color-grey
$form-bgc := $color-white
$form-invalid-color := #e64340
$form-group-legend-color := $color-light-grey
$form-group-legend-bgc := $color-background
$form-label-required-color := #e64340

// drawer
$drawer-color := $color-dark-grey
$drawer-title-bdc := $color-light-grey-ss
$drawer-title-bgc := $color-white
$drawer-panel-bgc := $color-white
$drawer-item-active-bgc := $color-light-grey-opacity

// scroll-nav
$scroll-nav-bgc := $color-white
$scroll-nav-color := $color-grey
$scroll-nav-active-color := $color-orange

// image-preview
$image-preview-counter-color := $color-white

// tab-bar & tab-panel
$tab-color := $color-grey
$tab-active-color := $color-dark-orange
$tab-slider-bgc := $color-dark-orange

axios 请求响应拦截器 interceptor.js

import axios from "axios";

export default function(vm) {
 axios.interceptors.request.use(config => {
  const token = localStorage.getItem("token");
  if (token) {
   config.headers.Authorization = "Bearer " + token;
  }
  return config;
 });

 axios.interceptors.response.use(null, err => {
  if (err.response.status === 401) {
   // 清空
   vm.$store.dispatch("logout");
   // 跳转
   vm.$router.push("/login");
  }
  return Promise.reject(err);
 });
}

路由守卫 路由 router.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Login from "./views/Login.vue";

Vue.use(Router);

const router = new Router({
 mode: "history",
 base: process.env.BASE_URL,
 routes: [
  {
   path: "/",
   name: "home",
   component: Home
  },
  {
   path: "/login",
   name: "login",
   component: Login
  },
  {
   path: "/about",
   name: "about",
   meta: { auth: true },
   // route level code-splitting
   // this generates a separate chunk (about.[hash].js) for this route
   // which is lazy-loaded when the route is visited.
   component: () =>
    import(/* webpackChunkName: "about" */ "./views/About.vue")
  }
 ]
});

router.beforeEach((to, from, next) => {
 if (to.meta.auth) {
  // 只要本地有token就认为登录了
  const token = localStorage.getItem("token");
  if (token) {
   next();
  } else {
   // 未登录
   next({
    path: "/login",
    query: { redirect: to.path }
   });
  }
 } else {
  next();
 }
});

export default router;

mock数据 或mock-easy vue.config.js

module.exports = {
 css: {
  loaderOptions: {
   stylus: {
    "resolve url": true,
    import: ["./src/theme"]
   }
  }
 },
 pluginOptions: {
  "cube-ui": {
   postCompile: true,
   theme: false
  }
 },
 configureWebpack: {
  devServer: {
   proxy: {
    "/api": {
      target: "http://127.0.0.1:3000/", 
      changOrigin: true
    }
   },
   // before(app) {
   //  app.get("/api/login", (req, res) => {
   //   const { username, password } = req.query;
   //   if (username === "kaikeba" && password === "123") {
   //    res.json({ code: 1, token: "jilei" });
   //   } else {
   //    res.status(401).json({ code: 0, message: "用户名或密码错误" });
   //   }
   //  });

   // 中间件函数
   //  function auth(req, res, next) {
   //   if (req.headers.token) {
   //    next();
   //   } else {
   //    res.status(401); 如果设置这个 只是设置状态，并没有返回前端，会导致前端等待状态
        res.sendStatus(401) 这个正确的
   //   }
   //  }

   //  app.get("/api/userinfo", auth, (req, res) => {
   //   res.json({ code: 1, data: { name: "Jerry" } });
   //  });
   // }
  }
 }
};

登录动作，store.js

index.js

import user from './user'

Vue.use(Vuex)

export default new Vuex.Store({
 modules: {user}
})

user.js

import us from '@/service/user'

export default {
  state: {
    isLogin: !!localStorage.getItem("token")
  },
  mutations: {
    setLoginState(state, val) {
      state.isLogin = val;
    }
  },
  actions: {
    login({commit}, userInfo) {
      return us.login(userInfo).then(({token}) => {
        // code, token
        if (token) {
          // 登录成功
          commit('setLoginState', true)
          localStorage.setItem('token', token)
          return true
        }
        return false
      })
    },
    logout({commit}){
      localStorage.removeItem('token')
      commit('setLoginState', false)
    }
  }
}

gitignore

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

main.js

import Vue from 'vue'
import './cube-ui'
import App from './App.vue'
import store from './store'
import router from './router'
import interceptor from './interceptor'

Vue.config.productionTip = false

const app = new Vue({
 store,
 router,
 render: h => h(App)
}).$mount('#app');

interceptor(app);

vue中的使用token的方法示例

深入理解令牌机制

Bearer Token规范
概念：描述在http访问OAuth2保护资源时如何使用令牌的规范
特点：令牌就是身份证明，无需证明令牌的所有权
具体规定：在请求头中定义Authorization

Authorization: Bearer <token>

Json Web Token规范
概念：令牌的具体定义方式
规定：令牌由三部分构成 “头”，“载荷”，“签名”
头：包含加密算法。令牌类型等信息
载荷：包含用户信息。签发时间和过期时间等信息，base64编码
签名：根据头 和载荷及秘钥加密得到的哈希串Hmac Sha1 256

server/server.js

const Koa = require("koa");
const Router = require("koa-router");
const jwt = require("jsonwebtoken");
const jwtAuth = require("koa-jwt");
const secret = "it's a secret";
const app = new Koa();
const router = new Router();
router.get("/api/login", async ctx => {
const { username, passwd } = ctx.query;
console.log(username, passwd);
if (username == "kaikeba" && passwd == "123") {
// 生成令牌
const token = jwt.sign(
{
data: { name: "kaikeba" }, // 用户信息数据
exp: Math.floor(Date.now() / 1000) + 60 * 60 // 过期时},
secret
);
ctx.body = { code: 1, token };
} else {
ctx.status = 401;
ctx.body = { code: 0, message: "用户名或者密码错误" };
}
});
router.get(
"/api/userinfo",
jwtAuth({ secret }),
async ctx => {
ctx.body = { code: 1, data: { name: "jerry", age: 20 } };
}
);
app.use(router.routes());
app.listen(3000);

到此这篇关于vue中的使用token的方法示例的文章就介绍到这了,更多相关vue使用token内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

vue中的使用token的方法示例

- Author -

yang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
js实现橱窗展示效果
Jan 11 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 #Javascript
JS如何在数组指定位置插入元素
Mar 10 #Javascript
vue实现简单瀑布流布局
May 28 #Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 #Javascript
微信小程序用canvas画图并分享
Mar 09 #Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 #Javascript
原生js无缝轮播插件使用详解
Mar 09 #Javascript
慰问信(53) 党团范文(807) 报告(147) 工作总结(1972) 导游词(322) 闭幕词(9) 通知(159) 汇报材料(247) 开幕词(63) 计划(88)
You might like
DC动画很好看？新作烂得令人发指，名叫《红色之子》
2020/04/09 欧美动漫
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
php中的ini配置原理详解
2014/10/14 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
web.py获取上传文件名的正确方法
2014/08/26 Python
Python生成随机密码的方法
2017/06/16 Python
python随机取list中的元素方法
2018/04/08 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python 类，property属性(简化属性的操作)，@property，property()用法示例
2019/10/12 Python
python 动态调用函数实例解析
2019/10/21 Python
运行Python编写的程序方法实例
2020/10/21 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
法拉利英国精品店：Ferraris Boutique UK
2019/07/20 全球购物
Shop Apotheke瑞士：您的健康与美容网上商店
2019/10/09 全球购物
Alexandre Birman美国官网：亚历山大·伯曼
2019/10/30 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
委托公证书范本
2014/04/03 职场文书
开学典礼策划方案
2014/05/28 职场文书
关爱残疾人标语
2014/06/25 职场文书
销售顾问工作计划书
2014/09/15 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python