初始于登錄頁面

Home.vue

<template> <div class='home'> </div></template><script>// @ is an alias to /srcimport 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, tokenif (token) { // 登錄成功 commit(’setLoginState’, true) localStorage.setItem(’token’, token) return true}return false }) }, logout({commit}){ localStorage.removeItem(’token’) commit(’setLoginState’, false) } }}

gitignore

.DS_Storenode_modules/dist# local env files.env.local.env.*.local# Log filesnpm-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 = falseconst app = new Vue({ store, router, render: h => h(App)}).$mount(’#app’);interceptor(app);

深入理解令牌機制

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內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！