login-demo

├── static └── .gitkeep ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── App.vue ├── router │ └── index.js ├── styles │ └── common.css ├── main.js └── pages │ ├── login │ └── index.vue │ └── home │ └── index.vue ├── .editorconfig ├── .gitignore ├── .babelrc ├── .postcssrc.js ├── index.html ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | package-lock.json 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | login-demo 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import loginComponent from '../pages/login' 4 | import homeComponent from '../pages/home' 5 | 6 | Vue.use(Router) 7 | 8 | export default new Router({ 9 | routes: [ 10 | { path: '/', redirect: '/login' }, 11 | { path: '/login', component: loginComponent }, 12 | { path: '/home', component: homeComponent }, 13 | ] 14 | }) 15 | -------------------------------------------------------------------------------- /src/styles/common.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "login-demo", 3 | "version": "1.0.0", 4 | "description": "Login demo with token", 5 | "author": "TianchengLee ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.18.0", 14 | "element-ui": "^2.4.11", 15 | "vue": "^2.5.2", 16 | "vue-router": "^3.0.1", 17 | "vuex": "^3.0.1" 18 | }, 19 | "devDependencies": { 20 | "less": "^3.9.0", 21 | "less-loader": "^4.1.0", 22 | "node-sass": "^4.11.0", 23 | "sass": "^1.16.0", 24 | "autoprefixer": "^7.1.2", 25 | "babel-core": "^6.22.1", 26 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 27 | "babel-loader": "^7.1.1", 28 | "babel-plugin-syntax-jsx": "^6.18.0", 29 | "babel-plugin-transform-runtime": "^6.22.0", 30 | "babel-plugin-transform-vue-jsx": "^3.5.0", 31 | "babel-preset-env": "^1.3.2", 32 | "babel-preset-stage-2": "^6.22.0", 33 | "chalk": "^2.0.1", 34 | "copy-webpack-plugin": "^4.0.1", 35 | "css-loader": "^0.28.0", 36 | "extract-text-webpack-plugin": "^3.0.0", 37 | "file-loader": "^1.1.4", 38 | "friendly-errors-webpack-plugin": "^1.6.1", 39 | "html-webpack-plugin": "^2.30.1", 40 | "node-notifier": "^5.1.2", 41 | "optimize-css-assets-webpack-plugin": "^3.2.0", 42 | "ora": "^1.2.0", 43 | "portfinder": "^1.0.13", 44 | "postcss-import": "^11.0.0", 45 | "postcss-loader": "^2.0.8", 46 | "postcss-url": "^7.2.1", 47 | "rimraf": "^2.6.0", 48 | "semver": "^5.3.0", 49 | "shelljs": "^0.7.6", 50 | "uglifyjs-webpack-plugin": "^1.1.1", 51 | "url-loader": "^0.5.8", 52 | "vue-loader": "^13.3.0", 53 | "vue-style-loader": "^3.0.1", 54 | "vue-template-compiler": "^2.5.2", 55 | "webpack": "^3.6.0", 56 | "webpack-bundle-analyzer": "^2.9.0", 57 | "webpack-dev-server": "^2.9.1", 58 | "webpack-merge": "^4.1.0" 59 | }, 60 | "engines": { 61 | "node": ">= 6.0.0", 62 | "npm": ">= 3.0.0" 63 | }, 64 | "browserslist": [ 65 | "> 1%", 66 | "last 2 versions", 67 | "not ie <= 8" 68 | ] 69 | } 70 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | import ElementUI from 'element-ui' 5 | import 'element-ui/lib/theme-chalk/index.css' 6 | import './styles/common.css' 7 | Vue.use(ElementUI) 8 | 9 | // 导包 10 | import Vuex from 'vuex' 11 | 12 | // 使用Vue安装Vuex(模块化工程必须要做的一件事) 13 | Vue.use(Vuex) 14 | 15 | // 创建store对象 16 | let store = new Vuex.Store({ 17 | // 表示仓库的数据 18 | state: { 19 | token: localStorage.getItem('token'), 20 | userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}') 21 | }, 22 | // 用于操作仓库的数据 23 | mutations: { 24 | setUserInfoAndToken(state, userInfo) { 25 | state.token = userInfo.token 26 | state.userInfo = userInfo 27 | localStorage.setItem("token", userInfo.token); 28 | localStorage.setItem("userInfo", JSON.stringify(userInfo)); 29 | } 30 | }, 31 | // 用于获取仓库的数据(进行简单的处理) 32 | getters: {} 33 | }) 34 | 35 | import axios from 'axios' 36 | axios.defaults.baseURL = 'http://litc.pro:9999/v1/' 37 | 38 | // 添加请求拦截器 39 | axios.interceptors.request.use(function (config) { 40 | // 在发送请求之前做些什么 41 | // { 42 | // headers: { Authorization: token } 43 | // } 44 | let token = localStorage.getItem('token') 45 | if (token) { 46 | config.headers.Authorization = token 47 | } 48 | return config; 49 | }, function (error) { 50 | // 对请求错误做些什么 51 | return Promise.reject(error); 52 | }); 53 | 54 | // 添加响应拦截器 55 | axios.interceptors.response.use(function (response) { 56 | // 对响应数据做点什么 57 | return response; 58 | }, function (error) { 59 | // 对响应错误做点什么 60 | return Promise.reject(error); 61 | }); 62 | 63 | Vue.prototype.$http = axios 64 | 65 | // console.log(Vue.prototype) 66 | 67 | // 路由的导航守卫作用: 在每一次路由跳转的时候, 都会触发一系列回调函数, 这些回调函数被称为导航守卫, 可以在这些回调函数中进行路由拦截操作 68 | // 在进入某个路由之前 69 | router.beforeEach((to, from, next) => { 70 | // 在此处就需要判断, 是否能进入一些禁地(需要登录的页面) 71 | // console.log(to, from) 72 | // 如果添加了导航守卫的回调函数 73 | // 必须调用next函数将其引导到某个页面, 如果不传参数就是不干预路由跳转 74 | let token = localStorage.getItem('token') 75 | if (!token && to.path !== '/login') { 76 | // console.log('我在疯狂的进login') 77 | return next('/login') 78 | } 79 | 80 | if (token && to.path === '/login') { 81 | return next('/home') 82 | } 83 | 84 | next() 85 | }) 86 | 87 | // 在进入之后 88 | router.afterEach(route => { 89 | 90 | }) 91 | 92 | Vue.config.productionTip = false 93 | 94 | /* eslint-disable no-new */ 95 | new Vue({ 96 | el: '#app', 97 | router, 98 | store, 99 | render: h => h(App) 100 | }) 101 | -------------------------------------------------------------------------------- /src/pages/login/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 70 | 71 | 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # login-demo 2 | 3 | > Login demo with token 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | 23 | 24 | ## Vue最后一天 ## 25 | 26 | - Vue基础: 27 | 28 | + 插值表达式 29 | + 指令 30 | + 事件处理 31 | + 组件 32 | + 动画 33 | + 过滤器 34 | + watch 35 | + computed 36 | ... 37 | 38 | - vue-router 路由 39 | 40 | + 路由切换跳转前进后退,结合watch监视路由变化 41 | 42 | + **导航守卫** 43 | 44 | - vue-resource / **axios(拦截器, 模块化)** 45 | 46 | + http库 47 | 48 | - vuex 49 | 50 | + 数据共享 51 | 52 | - **JWT 使用Token做登录状态保持** 53 | 54 | - **Element-UI 桌面端的UI组件库** 55 | 56 | ### 登录项目的设计目标 ### 57 | 58 | - 掌握技能点: 59 | 60 | + [x] 项目部署 61 | + [x] 项目管理 62 | + [x] Element-UI的使用 63 | + [x] JWT进行登录状态保持 64 | + [x] 路由导航守卫的使用 65 | + [x] Axios的基础和高级用法 66 | 67 | 68 | ### 项目部署 ### 69 | 70 | 1. 使用`vue-cli`脚手架建立项目 71 | 72 | 预先准备环境: node(8+) + npm + vue-cli(npm i vue-cli -g) 73 | 74 | vue init webpack login-demo 75 | 76 | 注意: 如果需要开启eslint或e2e测试等, 自行选择, 这里都选了N, 只开启了vue-router, 并使用npm管理项目 77 | 78 | 演示案例: 79 | 80 | PS C:\Users\LTC\Desktop> vue init webpack login-demo2 81 | 82 | ? Project name login-demo2 83 | ? Project description Login demo with JWT 84 | ? Author TianchengLee 85 | ? Vue build runtime 86 | ? Install vue-router? Yes 87 | ? Use ESLint to lint your code? No 88 | ? Set up unit tests No 89 | ? Setup e2e tests with Nightwatch? No 90 | ? Should we run `npm install` for you after the project has been created? (recommended) npm 91 | 92 | 2. 安装less或sass 93 | 94 | 由于脚手架默认配置好了less和sass, 但是没有安装对应的包, 可以根据需求自行选择安装 95 | 96 | npm i less less-loader sass-loader node-sass -D 97 | 98 | 3. 安装项目中额外要用的包 99 | 100 | npm i element-ui axios vuex -S 101 | 102 | 4. 使用git/svn来管理代码 103 | 104 | 在本地初始化仓库 105 | 106 | git init 107 | 108 | 提交代码到本地 109 | 110 | git add . 111 | git commit -m "Init Project" 112 | 113 | 在github中建立好仓库, 将本地仓库和github仓库进行关联并提交本地的代码到远程 114 | 115 | git remote add origin git@github.com:TianchengLee/login-demo.git 116 | git push -u origin master 117 | 118 | ### 使用Element-UI ### 119 | 120 | 引入 element-ui 121 | 122 | `Vue.use()`即可 123 | 124 | ### Axios的使用 ### 125 | 126 | > Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 127 | 128 | - 特性 129 | 130 | + 从浏览器中创建 XMLHttpRequests 131 | + 从 node.js 创建 http 请求 132 | + 支持 Promise API 133 | + 拦截请求和响应 134 | + 转换请求数据和响应数据 135 | + 取消请求 136 | + 自动转换 JSON 数据 137 | + 客户端支持防御 XSRF -------------------------------------------------------------------------------- /src/pages/home/index.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 104 | 105 | 115 | --------------------------------------------------------------------------------

登陆